/*****************************************************************************
******************************************************************************
*
* Module      : style_common.css
* Description : common CSS style definitions for Macustar PHP website
* Author      : Christof Girgenrath
*
******************************************************************************
******************************************************************************
*
* Revision history:
* 180315 cgh removed button_report, now button_submit is used instead;
* 180222 cg initial version;
*
******************************************************************************
******************************************************************************/

/* expandable/collapse menu template
http://www.cssportal.com/css3-preview/showing-and-hiding-content-with-pure-css3.php
http://www.cssportal.com/css3-preview/demo/css-menu-ex3.html
*/

/*---------------------------------------------------------------------------*
CSS3 usage
*----------------------------------------------------------------------------*

see: http://www.cssportal.com/css-selectors/

selector {				// apply to all <selector> in HTML
	property:value;
}

#selector {				// apply to <id="selector"> in HTML
	property:value;
}

.selector {				// apply to <class="selector"> in HTML
	property:value;
}

selector1, selector2	// apply to all <selector1> and <selector2>
selector1 selector2		// apply to <selector2> within <selector1> element
selector:pseudo-class 	// apply <pseudo-class> within <selector>
						// e.g. visited, hover, focus ...
selector::pseudo-element// apply to <pseudo-element> within <selector>
						// e.g. first-line, first-letter, before, ...
selector[attribute]		// apply to all <selector> with <attribute>
						// e.g. <a target>
[attribute="<value>"]	// apply if <attribute>="<value>", 
						// e.g. <a target="_blank">
[attribute^="<value>"]	// apply if <attribute> begins with "<value>", 
[attribute*="<value>"]	// apply if <attribute> contains the "<value>", 
*/



/*---------------------------------------------------------------------------*
body and background
*----------------------------------------------------------------------------*/

body {
	margin: 0px;
	border: none;
	padding: 4px;
	overflow: auto;
	color: #000000;
	background-color: #f0f8ff;
//	background-color: #e4f2ff;
//	font-family: "Times New Roman", serif;
	font-family: "Arial", sans-serif;
	font-size: 90%;
	text-align: justify;
}

.bg_body {
	position: fixed;
	top: 104px;
	width: 99.2%;
	z-index: -10;
}



/* position links in pages */
.anchor {
	position: absolute;
	margin: -120px
}



/*---------------------------------------------------------------------------*
header and footer
*----------------------------------------------------------------------------*/

/* background image set in site.php, function html_header */
.header {
	position: fixed;
	width: 99.2%;
	height: 100px;
	z-index: 10;
	color: #202080;
	font-family: "Arial", sans-serif;
	font-size: 96%;
	font-weight: bold;
	border-bottom: 2px solid #202050;
	box-shadow: 3px 3px 6px #556575;
	overflow: hidden;
	background-repeat: repeat-x;
}

.footer {
	border-top: 2px solid #202050;
	padding: 1px;
	color: #202050;
	font-family: "Arial", sans-serif;
	font-size: 80%;
	text-align: center;
}



/*---------------------------------------------------------------------------*
navigation menu
*----------------------------------------------------------------------------*/

/* common menu */
div.menu {
	position: fixed;
	top: 96px;
	width: 100%;
	z-index: 11;
	border: none;
	padding: 0px;
	font-family: "Arial", sans-serif;
	font-size: 98%;
	text-align: center;
}

div.menu ul {
	margin: 0px;
	border: none;
//	border: 1px solid green;
	padding: 0px;
}

div.menu ul li {
	width: 120px;
	height: 20px;
	margin: 0px;
	border: none;
	border-radius: 3px;
	padding: 0px;
	box-shadow: 3px 3px 6px #556575;
	background-repeat: repeat-x;
	list-style-type: none;
	line-height: 20px;
}

div.menu ul li a {
	color: #202050;
	text-decoration: none;
}

div.menu ul li a:hover {
	color: #000010;
	font-weight: bold;
}



/* main menu - background image set in site.php, function html_header*/
div.menu ul.menu li {
	display: inline-block;
	position: relative;
}



/* sub menu */
div.menu ul.menu li ul.sub-menu {
	display: none;
	position: absolute;
	top: 20px;
	left: 0px;
}

div.menu ul.menu li:hover ul.sub-menu {
	display: inline-block;
}



/* subsub menu */
div.menu ul.sub-menu li ul.subsub-menu {
	display: none;
	position: absolute;
	top: 0px;
	left: 120px;
}

div.menu ul.sub-menu li:hover ul.subsub-menu {
	display: inline-block;
}



/* subsubsub menu */
div.menu ul.subsub-menu li ul.subsubsub-menu {
	display: none;
	position: absolute;
	top: 0px;
	left: 120px;
}

div.menu ul.subsub-menu li:hover ul.subsubsub-menu {
	display: inline-block;
}



/* subsubsubsub menu */
div.menu ul.subsubsub-menu li ul.subsubsubsub-menu {
	display: none;
	position: absolute;
	top: 0px;
	left: 120px;
}

div.menu ul.subsubsub-menu li:hover ul.subsubsubsub-menu {
	display: inline-block;
}

/* style to highlight current site in menu is done in site.php */



/*---------------------------------------------------------------------------*
container arrangement: hold contents in tables to define site layout
*----------------------------------------------------------------------------*/

/* container box holds everything between header and footer */
div.container {
	margin: 120px 0px 16px 0px;
	border: none;
//	border: 1px solid red;
	padding: 0px;
}



/* container table without margin/padding to define page layout */
table.container {
	width: 100%;
	margin: 0px;
	border: none;
//	border: 1px solid blue;
	border-collapse: collapse;
	padding: 0px;
}

table.container tr.container,
table.container th.container,
table.container td.container {
	margin: 0px;
	border: none;
//	border: 1px solid blue;
	padding: 4px;
	vertical-align: top;
}

div.site_header h1 {
	margin: 20px 0px 20px 0px;
	padding: 4px 0px 4px 0px;
	color: #202050;
	text-align: center;
}



/*---------------------------------------------------------------------------*
contents: contents is displayed in boxes
*----------------------------------------------------------------------------*/

/* contents box header */
div.contents_header {
	float: left;
	margin: 0px;
	border: none;
	padding: 0px;
}

div.contents_header h1,
div.contents_header h2,
div.contents_header h3 {
	margin: 20px 10px 0px 10px;
	padding: 4px 10px 4px 10px;
	color: #202050;
}



/* contents box */
div.contents {
	clear: both;
	margin: 10px 10px 10px 10px;
//	border: 3px ridge #202050;
	border: 1px solid #d0d0d0;
	border-radius: 10px;
	padding: 20px 10px 20px 10px;
	box-shadow: 3px 3px 6px #556575;
	overflow: auto;
	background-color: #fdfdfd;
}



/* contents text */
p.debug {
	margin: 0px;
	color: #004000;
	font-family: "Courier", sans-serif;
	text-align: left;
}

p.error {
	margin: 0px;
	color: #d00000;
}

div.contents p {
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

div.contents p.medium {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-size: 100%;
	font-weight: normal;
}

div.contents p.bold {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-size: 100%;
	font-weight: bold;
}

div.contents p.msg {
	margin: 0px;
	padding: 10px 10px 10px 10px;
	font-size: 100%;
	font-weight: bold;
}

div.contents p.error {
	margin: 0px;
	padding: 10px 10px 10px 10px;
	color: #d00000;
	font-weight: bold;
}

div.contents p.output_level1 {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-style: normal;
	font-variant: small-caps;
	font-size: 100%;
	font-weight: bold;
}

div.contents p.output_level2 {
	margin: 0px;
	padding: 0px 0px 0px 10px;
	font-style: italic;
	font-variant: normal;
	font-size: 100%;
	font-weight: normal;
}

div.contents p.output_level3 {
	margin: 0px;
	padding: 0px 0px 0px 20px;
	font-style: normal;
	font-variant: normal;
	font-size: 90%;
	font-weight: normal;
}

div.contents h1,
div.contents h2,
div.contents h3 {
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 10px 10px;
	color: #202050;
}

div.contents ul.list {
	margin: 0px 0px 10px 0px;
}

div.contents ul.list li.list {
	margin: 0px 0px 10px 0px;
}



/* contents table login */
div.contents table.login {
	margin: 20px;
	border: 1px solid #d0d0d0;
	border-radius: 10px;
	padding: 8px;
	box-shadow: 3px 3px 6px #556575;
	background-color: #e0e0e0;
}

div.contents table.login td {
	margin: 0px;
//	border: solid green;
	padding: 0px 10px 0px 10px;
	text-align: left;
}

div.contents table.login td input {
	width: 12em;
}



/* contents table vertical order */
div.contents table.vertical {
	margin: 0px;
//	border: solid red;
	padding: 0px;
}

div.contents table.vertical td {
	margin: 0px;
//	border: solid green;
	padding: 0px 10px 0px 10px;
	vertical-align: top;
}



/* contents table data base */
div.contents div.db {
	display: table;
	margin: 0px 0px 20px 0px;
	border: 1px solid #d0d0d0;
	border-radius: 10px;
	padding: 2px;
	box-shadow: 3px 3px 6px #556575;
	background-color: #e0e0e0;
	font-size: 86%;
}

div.contents div.db table {
	margin: 0px;
	border-collapse: collapse;
	padding: 0px;
	background-color: #e0e0e0;
	font-size: 100%;
	text-align: left;
}

div.contents div.db table th,
div.contents div.db table td {
	margin: 0px;
	border: 1px solid #c0c0c0;
	padding: 1px 4px 1px 4px;
}

div.contents div.db table tr:hover {
	background-color: #c0e0ff;
	cursor: pointer;
}

div.contents div.db table tr:first-child {
	background-color: #e0e0e0;
	cursor: auto;
}

div.contents div.db table th:hover {
	background-color: #c0e0ff;
	cursor: pointer;
}

div.contents div.db table th.plain:hover {
	background-color: #e0e0e0;
	cursor: auto;
}

div.contents div.db table td a,
div.contents div.db table td a.link,
div.contents div.db table td a.visited,
div.contents div.db table th a,
div.contents div.db table th a.link,
div.contents div.db table th a.visited {
	display: block;
	padding: 1px 2px 1px 2px;
	color: #000000;
	text-decoration: none;
}



/* contents table data base entry */
div.contents div.db table.entry {
	border-collapse: collapse;
	background-color: #e0e0e0;
	text-align: left;
}

div.contents div.db table.entry tr {
	background-color: #e0e0e0;
	cursor: auto;
}


div.contents div.db table.entry th,
div.contents div.db table.entry th:hover {
	background-color: #e0e0e0;
	cursor: auto;
}



/* contents table report display */
div.contents div.db table.report {
	margin: 2px;
	border-collapse: collapse;
	background-color: #e0e0e0;
	text-align: left;
}

div.contents div.db table.report tr {
	background-color: #e0e0e0;
	cursor: auto;
}

div.contents div.db table.report th,
div.contents div.db table.report td {
	border: 1px solid #202050;
	background-color: #e0e0e0;
	vertical-align: top;
	cursor: auto;
}

div.contents div.db table.report td table.report_par {
	border-collapse: collapse;
	background-color: #e0e0e0;
	text-align: left;
}

div.contents div.db table.report td table.report_par td {
	border: none;
	background-color: #e0e0e0;
	vertical-align: middle;
	cursor: auto;
}



/* contents table data base switch entry */
div.contents div.db table.switch {
	border-collapse: collapse;
	background-color: #e0e0e0;
	text-align: left;
}

div.contents div.db table.switch td {
	background-color: #e0e0e0;
	cursor: auto;
}

div.contents div.db table.switch td:hover {
	background-color: #c0e0ff;
	cursor: auto;
}

div.contents div.db table.switch td:first-child {
	background-color: #e0e0e0;
	cursor: auto;
}



/* contents picture related */
div.contents img.pic {
	margin: 10px;
	border: 1px solid #d0d0d0;
	border-radius: 10px;
	padding: 0px;
	box-shadow: 3px 3px 6px #556575;
	background-color: #f8f8f8;
}



/* contents links */
p a:link,
h1 a:link,
h2 a:link,
h3 a:link,
div.contents ul.list a:link,
div.contents table.list a:link {
	color: #303080;
}

p a:visited,
h1 a:visited,
h2 a:visited,
h3 a:visited,
div.contents ul.list a:visited,
div.contents table.list a:visited {
	color: #202050;
}

p a:hover, p a:active,
h1 a:hover, h1 a:active,
h2 a:hover, h2 a:active,
h3 a:hover, h3 a:active,
div.contents ul.list a:hover, div.contents ul.list a:active,
div.contents table.list a:hover, div.contents table.list a:active {
	color: #6060f0;
}



/* contents block: no margin/padding */
div.contents .block {
	display: block;
	width: 100%;
	margin: 0px;
	border: 0px;
//	border: 1px solid red;
	padding: 0px;
	font-weight: bold;
	text-align: center;
}

div.contents div.img {
	margin: 0px;
	border: 0px;
//	border: 1px solid red;
	padding: 0px 10px 0px 10px;
	font-weight: bold;
	text-align: center;
}



/*---------------------------------------------------------------------------*
buttons
*----------------------------------------------------------------------------*/

/* picture buttons */
.bt_pic {
	margin: 10px;
	border: none;
//	border: 1px solid green;
	border-radius: 6px;
	padding: 0px;
	box-shadow: 3px 3px 6px #556575;
	background-color: #f8f8f8;
	opacity: 0.8;
	filter: alpha(opacity=80);
	cursor: pointer;
}

.bt_pic:hover {
	box-shadow: 3px 3px 12px #555585;
	opacity: 1.0;
	filter: alpha(opacity=100);
}



/* submit button - background image set in site.php, function html_header */
#bt_submit {
	display: block;
	width: 120px;
	height: 20px;
	margin: 10px 10px 10px 10px;
	border: none;
//	border: 1px solid green;
	border-radius: 3px;
	padding: 0px;
	box-shadow: 3px 3px 6px #556575;
	background-repeat: repeat-x;
	color: #202050;
	font-family: "Arial", sans-serif;
	font-size: 90%;
	text-align: center;
	text-decoration: none;
	line-height: 20px;
}

#bt_submit:hover {
	color: #000010;
	font-weight: bold;
}



/* change browser default select drop down */
div.bt_select ul {
	display: block;
	position: absolute;
	list-style: none;
	margin: 0px;
	border: none;
	border: 1px solid #000000;
	padding: 0px;
	background: #d0d0d0;
}

div.bt_select ul li {
	display: none;
}

div.bt_select ul:hover {
	background: #e08080;
}

div.bt_select ul:hover li {
	display: block;
	background: #80e080;
}

div.bt_select ul:hover li:hover {
	background: #8080e0;
}