/* Styles for the homepage of the Jazz Circle Höngg 
COPYRIGHT: Jirka Hoppe 2012
*/
body {
  background-color: #cccccc; /* grey color of the entire page - these are the unused parts at the left and right area, the black color is defined in 'content-body' */
  font-family: Arial Narrow  !important; /* have it as a default for entire page */
  font-size: 14pt !important;
}
hr {
	background-color: #ffff99;
}
h1 {
	text-align: center;
	font-family: 'Arial Black';
	font-size: 32pt;
	font-weight: bold;
	margin-top: 0em;
	margin-bottom: 0em;
}
frame {
	border-style:none;
}

/* =============== link styles */
a:link {
  text-decoration: underline;
  color: #ffff99;
}
a:visited {
  color: #ffff99;
  text-decoration: underline;
}
a:active {
  color: #ffff99;
  background-attachment: scroll;
}
a:hover {
  background: transparent none repeat scroll 0% 50%;
  color: #3333ff;
}

/* ================= important private styles */
.emphasize {
  font-weight: bold;
  font-style: italic;
}
.emphasize-red {
  font-weight: bold;
  font-style: italic;
  font-size: 20pt;
  color:red;
}

.kommentar {
  visibility: hidden;
}
.kommentar_small {
  font-size: 12pt;
  font-style: italic;
}

.header-place-date {
	text-align: center;
	margin-top: 0em;
	margin-bottom: 1em;
}
/* properties of text */
.extra-large {
  font-family: 'Arial Black';
  font-size: 32pt;
  font-weight: bold;
}
.large {
  font-family: 'Arial Black';
  font-size: 18pt;
  font-weight: bold;
}

.fans-mail {
	font-size: 11pt;
}

.tiny {
  font-size: 6pt;
}
.centered {
text-align: center 
}

.visible-div {
	visibility: visible
}

.invisible-div {
	visibility: hidden;
	height:0px
}
/* dedicated properties of titles */
.title-welcome {
  font-family: 'Arial Black';
  font-size: 18pt;
  font-weight: bold;
}
.title-JCH {
  font-family: 'Arial Black';
  font-size: 48pt;
  font-weight: bold;
}
/* =====================  page consists of a "page-main-area" with two "pages-side-areas" (in grey) on both sides */
.page-layout {
}
.page-side-area {
  width: 30%;
}
.page-main-area {
  width: 1225px;
}
.page-main-div {
	width:1225px;
	margin-left: auto;
	margin-right: auto;
}
/* the page-main-area" is a "frame-table". It consists of a "left frame" and a "main-frame" */

.frame-table {
  border-style: none;
  border-width: 0px;
  background-color: black;
  font-family: Arial Narrow  !important;
  font-size: 14pt  !important;
  color: #ffff99;
  width: 1221px;
}
.left-frame {
  border: 1px solid #ffff99;
  width: 221px;
  vertical-align: top;
  text-align: left;
}
.content-frame {
	/* used in the importing page */
  border-style: none;
  border-width: 0px;
  /*width: 1000px; the width is computed as the width of frame-table minus width of the left-frame */
  vertical-align: top;
  text-align: left;
}

.leftObjectStyle {
	height:1380px; /*was 1150.1220 */
	width:210px;
	border-style: none;
    border-width: 0px;
}
.leftFrameStyle {
	/*height:1250px; was 1150.1220 */
	width:210px;
	top:0px;
	border: 1px solid #ffff99;
}

.contentDivStyle {
	/* not used at all */
	position:absolute;
	/* left: 210px; has to be defined dynamically - the size of the gray area on the left side is dynamic */
	top:230px; 
	z-index:1;
	width:1000px;
	height:1000px; /* this value is changed dynamically when page is loaded set "setPostions" */
	border-style: none;
    border-width: 0px;
}
.content-body {
	/* not used at all */
  background-color: black;
  font-family: Arial Narrow !important;
  font-size: 14pt !important;;
  color: #ffff99;
  border-style: none;
  border-width: 0px;
}
.importing-frame {
  width:1020px; 
  border-style: none;
 }
/* for some unknown reason, Kompozer renames sometimes the style "content-body" to "content-div"
for that reason let's have a style "content-div" with exactly the same content as "content-body" */

.content-div { /* used in body of the imported page; not used in importing page */
  background-color: black;
  font-family: Arial Narrow !important;;
  font-size: 14pt !important;;
  color: #ffff99;
  	width:1000px;
  border-style: none;
  border-width: 0px;
}

.contentObjStyle {
	/* not used at all */
	width:1000px;
	height:1000px; /* this value is changed dynamically when page is loaded "setPostions" */
	border-style: none;
    border-width: 0px;

}


/* -----------register table ist the bar with registers "Home", "Rückblick", "Archiv", etc. ------------*/

.registerDivStyle {
	position:relative;
	top:0px;
	left:0px;
	height: 230px;  /* do not understand the exact meaning - to be investigated later */
	z-index:3
}

.registerObjStyle {
	/* this rectangle of the register block, inclusive drop down list, - especially their height
		it should be not too high, otherwise there would be a scrolling bar at the right side of the menu
		it should be not too large, otherwise the register overlaps the content and URL links below the picture cannot be selected (they are overlapped / hidden)
		the value is trial and error  */
	height:450px;  
	width:1050px;
	border:0;
}
.registerFrameStyle {
	/* this rectangle of the register block  */
	height:220px;  
	width:1050px;
	border:0;
}

.register-selected {
  width: 16%;
  background-color: black;
  color: #ffff99;
}
.register-unselected {
  width: 16%;
  color: black;
}
#register-table {
	 /*-------------------------- height:30px; ------------------------------------*/
	 width: 100%;
  border: 1px solid black;
  margin: 0;
  padding: 0;
  background-color: #ffff99;
  text-align: center;
  font-family: 'Arial Black';
  font-size: 14pt;
  color: black;
  z-index: 30;
}

#register-table li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  float: left;
}
#register-table li a:link {
  margin: 0;
  padding: 4px;
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
#register-table li a:hover {
  background: #ffcc33 none repeat scroll 0% 50%;
  color: black;
}
#register-table div {
  border: 1px solid #5970b2;
  margin: 0;
  padding: 0;
  background: black none repeat scroll 0% 50%;
  position: absolute;
  visibility: hidden;
}
#register-table div a:link {
  margin: 0;
  padding: 5px 10px;
  background: #ffff99 none repeat scroll 0% 50%;
  position: relative;
  display: block;
  width: auto;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  color: black;
  font-family: arial;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
}
#register-table div a:visited {
  margin: 0;
  padding: 5px 10px;
  background: #ffff99 none repeat scroll 0% 50%;
  position: relative;
  display: block;
  width: auto;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  color: black;
  font-family: arial;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
}
#register-table div a:hover {
  background: #ffcc33 none repeat scroll 0% 50%;
  color: #ffffff;
  font-weight: bold;
}

.register-unselected a:link {
  color: black;
  text-decoration: underline;
}
.register-unselected a:visited {
  color: black;
  text-decoration: underline;
}
.register-unselected a:active {
  color: black;
  text-decoration: underline;
}
.register-unselected a:hover {
  font-weight: bold;
  color: #3366ff;
}
/* some remaining styles */
.footer {
  font-size: 8pt;
  text-align: center;
}
.footer-with-position {
  font-size: 8pt;
  text-align: center;
  /* position:absolute;*/
}
.field {
  width: 400px;
  background-color: #ffff99;
  font-family: Arial Narrow;
  font-size: 12pt;
}
.combined-cln {
  width: 100%;
}

.all-boarders {
  border: 1px solid #ffff99;
}
.bottomObjectStyle {
  text-align: center;
  font-size:2pt;
  color: black; 
  text-decoration: none;
}

/*------------------------------*/