/* 2 columns with background color, fixed width and any column largest Layout */
/* from http://www.neuroticweb.com/recursos/2-columns-layout/index.php?larga=der&width_de=450&width_iz=150&color_de=33CC99&color_iz=336666 */

/* ****************** body ***************** */
body {
    background: #333 url(images/body_background.jpg) repeat-x scroll top;
	color: black;
    margin: 0; 
    padding: 0;
    text-align: center;    /* centering for IE */
    font: small Arial, Helvetica, Verdana, sans-serif;
}

/* ****************** wrapper ***************** */
#wrapper {
	border: 0;
	text-align: left;     /* left align content again */
	width: 985px;         /* for >=1024 screens */
	margin: 0px auto;     /* standard compliant horizontal centering */
    padding: 0px;
}
	
.clearboth {
    clear: both;
}

/* ******************************************** */
/*                 page header                  */
/* ******************************************** */
#header {
    margin: 0px;
}

#header img {        /* only needed for IE, coz it draws a green border (?)   */
    border: 0px;     /* around <img> tags. WTF?                               */
}

#topmenu {
    color: white;
    border-left: white 1px solid;
    border-right: white 1px solid;
    border-bottom: white 1px solid;
	padding: 0.2em 0.4em 0.3em 0.4em;
	}

#topmenu a:link,
#topmenu a:visited {
    text-decoration: none;
	color: white;
}

#topmenu a:hover {
    text-decoration: underline;
}


/* ******************************************** */
/*               main contents                  */
/* ******************************************** */

/*
#container {
    is practically invisible due to only floating content, result sin height 0px
    background: url(images/wrapperbackground.png) repeat-y 50% 0; /* thus background shows no effect
    }
*/
	
#left {
	float: left;
	margin: 0px;
	position: relative;
	width: 254px;        /* full width: 254 + 2*border + 2 padding */
    padding: 0px;
}
	
#right {
    /* background: #C5C5C5 url("images/content_background.gif") repeat-x top; */
	float: left;
	margin: 0px 0px 0px 32px;
	width: 613px;   /* 605 + 2*border of panowrapper */
	/* min-height: 520px; */
    padding: 0px;
	}

#map {
    float: left;
	margin: 0px 0px 0px 5px;
	padding: 0px;
	width: 75px;
    background: green;
    }
	
/* ******************************************** */
/*          left: category browser              */
/* ******************************************** */

#catbrowser {
    }
#catbrowser a {
    text-decoration: none;
    }
#catbrowser img {
    border: #CCC8C9 1px solid;
	display: block;
    }
#catbrowser img#active {
    border: #F5CC5C 2px solid;
	}	
#category_mouseover {
    text-align: right;
    font-weight: bold;
	font-size: 16px;
	text-transform: uppercase;
    }
#cat_thumbs p#panorama_mouseover {
    color: #383838;
	text-align: center;
    font-weight: normal;
	margin: 2px 0px -9px 0px;
    }
	
/* category thumbs are 248x62 plus 3px border = 254 like left box */
#cat_thumbs {
    margin: 0;
	padding: 0;
	list-style: none;
    }
#cat_thumbs p {
	margin: 0px;
	padding: 0px;
    }
#cat_thumbs img {
    border: black 3px solid;
    }
#cat_thumbs p#category_title {
    text-align: right;
	font-weight: bold;
	font-size: 30px;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	line-height: 24px;
	color: black; /* #8D8D8D; */
	margin: 0px 0px -2px 0px;   /* this margin overwrites margin of #cat_thumbs p */
   }
#cat_thumbs li {
	margin: 0px;
	padding: 2px 0px 2px 0px;
    }

/* panorama thumbs are 50x50 ones, floating left in three rows */
#pano_thumbs {
    clear: left;
    margin: 10px 0px 0px 0px;
	padding: 2px 0px 10px 0px;
	background: #C5C5C5 url("images/content_background.gif") repeat-x top;
	border: #F5CC5C 3px solid;;
    }
#pano_thumbs ul {
    margin: 0px;
	padding: 0px;
	list-style: none;
    }
#pano_thumbs li {
    float: left;
	margin: 0px;
	padding: 8px 0px 0px 8px;
    }
#pano_thumbs li#active {
    float: left;
	margin: 0px;
	padding: 6px 0px 0px 6px;
    }



/* ******************************************** */
/*          right: panorama/static content      */
/* ******************************************** */

#panowrapper {
    float: left;
    width: 605px;
	padding: 4px;
	margin: 0px 0px 5px 0px;
	background: white;
   	border-left: 1px solid #6B6B6B;
   	border-right: 1px solid #6B6B6B;
   	border-bottom: 1px solid #6B6B6B;		
}

#panodescription {
    /* clear: left; */ /* not needed: div clearboth does this just before */
	background: #585858;
	border: 1px solid #5D5D5D;	
	margin: 0px;
	padding: 4px 4px 4px 6px;
	color: #F2F2F2;
}

#mp3player {
    /* clear: left; */ /* not needed: div clearboth does this just before */
	background: none;
	border: none;	
	margin: 0px 0px 5px 0px;
	padding: 0px;
	color: #F2F2F2;
	text-align: center;
}

#panodescription a:link,
#panodescription a:visited {
    text-decoration: none;
	color: #222222;
}

#panodescription a:hover {
    text-decoration: underline;
}

#panodescription img {
    margin: 0px 0px 0px 4px;
	padding: 0px;
    float: right; 
	border: 1px solid #8C8C8C;
    }
	
/* #panodescription ul {
    margin: 0px;
	padding: 0px;
	list-style: none;
}

#panodescription li {
	margin: 0px 0px 0px 4px;
	padding: 0px;
    float: right;
	border: 1px solid #8C8C8C;
} */

.panotitle {
    font-size: 24px;
	font-weight: bold;
	color: white;
    margin: 0px 0px 10px 0px;    
}

#staticwrapper {
    float: left;
    width: 620px;
	padding: 5px 20px 5px 20px;
	background: #FFFFFF;
   	border: 1px solid #6B6B6B;
	color: #444444;
	line-height: 1.4em;
}

#staticwrapper h3 {
    margin: 20px 0px;
}

#staticwrapper p {
    margin: 8px;
}

#staticwrapper img {
    margin: 5px;
}

/* ******************************************** */
/*        display format selector tabs          */
/* ******************************************** */

#formattabs {
    float: left;
    margin-bottom: 0px;
    width: 615px; /* normally 100% */
	background: url("images/bg.gif") repeat-x bottom;
    font-size: 93%;
    line-height: normal;
    }
#formattabs ul {
    margin: 0;
    padding: 10px 0px 0px;
    list-style: none;
    }
#formattabs li {
    float: right;
	background: url("images/tab_left.gif") no-repeat left top;
    margin: 0;
	padding: 0 0 0 9px;
    }
#formattabs li#interactivenote {
    float: left;
	background: none;
	color: #444444;
	padding: 0px 0px 0px 4px;
	font-size: 11px;
    }	
#formattabs a {
    float: left;       /* this one get overwritten later, only for IE5-Mac */
    display: block;
	background: url("images/tab_right.gif") no-repeat right top;
/*  padding:5px 15px 4px 6px; */
    padding: 2px 11px 1px 2px;
	text-decoration: none;
    font-weight: normal;
    color: #444444;
    }
  /* Commented Backslash Hack hides rule from IE5-Mac \*/
#formattabs a {
    float: none;
	}
  /* End IE5-Mac hack (IE5-Mac does _not_ read the above code) */
#formattabs a:hover {
    color: black;
    }
#formattabs #current {
    background-image:url("images/tab_left_on.gif");
    }
#formattabs #current a {
    background-image: url("images/tab_right_on.gif");
    color: #444444;
/*  padding-bottom: 5px;  */
	padding-bottom: 2px;
    }

	
/* ******************************************** */
/*                    footer                    */
/* ******************************************** */
#footer {
   clear: both;
   color: #AFAFAF;
   background: url(images/footer_background.gif) no-repeat scroll center top;
   height: 19px;
   margin: 80px 0px 0px 0px;
   padding: 16px;
   text-align: center;
}