/* heurist.css
 * Copyright 2006, 2007 Tom Murtagh and Kim Jackson
 * http://heuristscholar.org/
 * 
 * Common styles for Heurist,
 * including funky hover- and keyboard-accessible dropdown menus.
 */

/*
This file is part of Heurist.

Heurist is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.

Heurist is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/


/* Contents of  http://yui.yahooapis.com/2.2.2/build/fonts/fonts-min.css  -- standardises font sizes */
body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.22em;}

h3 { font-size: 120% }

form { padding: 0; margin: 0; /* fixes slight scrolling on safari */ }

/* see README.style for comments */

body {
	behavior: url("/csshover2.htc");	/* behaviour sheet for IE to support :hover */
}

img { border: 0; }

a:hover { text-decoration: underline; }

#page { width: 100%; height: 100%; }

/* more thin header stuff */
#header { /* background-color: #660000; */ height: 44px; }
#logo-cell {
	width: 170px;
}
#logo-cell a { text-decoration: none; }

#instance-name {
	font-family: monospace;
	font-weight: bold;
	font-size: 30px;
}

#title-cell {
	font-size: 14px;
	color: #666;
}
#title-cell a {
	color: #7D9AAA;
	text-decoration: none;
}
#title-cell a:hover {
	color: #7D9AAA;
	text-decoration: underline;
}

/* links in the top-right corner of every page (about, report a bug, contact us) */
#quicklink-cell {
	vertical-align: top;
	text-align: right;
	width: 250px;
	color: #666;
	font-size:12px;
}
#quicklink-cell a { color: #7D9AAA; text-decoration: none; margin: 0 1ex; }
#quicklink-cell a:hover { text-decoration: underline; }

/* a cell for adding a drop-down menu (only the search page?) */
#menu-cell {
	vertical-align: bottom;
	text-align: right;
	width: 10px;
}

#toolbar {
	height: 80px;
	color: #333;
}

/* #main { height: auto; } -- expands to rest of #page height */
#main-table { width: 100%; height: 100%; }

#left-cell { width: 200px; }
#divider-cell { width: 4px; }
/* #right-cell { width: auto; } -- expands to rest of #main-table width */


/* left and right content panels occupying most of the page */
.panel {
	border: 1px solid #BFBFBF; 
	font-size: 85%;
}
.panel-header {
	background-image:url(../img/heading_popup.png);
	height:25px;
	line-height: 24px;
	padding: 0 1ex;
}
.panel-header b { font-size: 107%; }
.panel-header a { color: #515151; }
.panel-header * { line-height: 24px; }
.result-container { vertical-align: top; }
.panel-main-content {
	position: absolute;
	overflow: auto;

	/* setting w/h to 100% doesn't work as well as one would hope,
	 * IE6 in particular doesn't get the hint.
	 */
	width: 100%;
	height: 100%;

}

.panel-footer { height: 24px; }

.expander { width: 100%; height: 100%; }  /* especially for flowing tables */



/* make focus outlines consistent (Safari doesn't draw the right focus on links with image in it) */
*:focus {
	outline: 1px dotted gray;
	color: #000;
}
.img-button:focus, #logo-cell a:focus { outline: none; }
*:focus img {
	outline: 1px dotted gray;
	text-align: center;
}

/* Buttons on firefox get a double outline unless we specify this;
 * IE treats the ::-moz-focus-inner as :unknown, which is treated as :focus by the csshover code.
 */
input[type=submit]::-moz-focus-inner, input[type=button]::-moz-focus-inner { border: none; }
select:focus { outline: none; }


/* generic awful workarounds to make radiobuttons and checkboxes cross-browser sane */
label input { vertical-align: text-top; padding: 0; margin: 0; width: 13px; height: 13px; }
label { line-height: 100%; }


div.popup {
	position: absolute;
	visibility: hidden;
	-webkit-box-shadow: 4px 4px 3px gray;
	background: url(../img/resize-handle.gif) #000 scroll bottom right no-repeat;
}
table.popup {
	overflow: hidden;	/* otherwise blinkencursor disappears on Firefox */
	display: block;
	background-color: white;

/*	border: 2px solid #aa7f7f; */
	margin: 1px;
	padding: 0;
	border-spacing: 0;
}
table.popup tr, table.popup td { padding: 0; border-spacing: 0; border: 0; overflow: hidden; }
table.popup td.header {
	height: 40px;
	line-height: 1.6em;
	padding-left: 25px;
	color: white;
	cursor: move;
	background-attachment: scroll;
	background-image: url(../img/heading_popup.png);
	background-repeat: repeat-x;
	background-position: 0px top;
	color:#333;
}
/* don't want it to look like you can select the header! */
table.popup td.header::selection, div.draggable td.header::selection, div.draggable td.header b::selection { background-color: inherit; color: inherit}
table.popup td.header::-moz-selection, div.draggable td.header::-moz-selection, div.draggable td.header b::-moz-selection { background-color: inherit; color: inherit}
table.popup div.close-button {
	float: right;
	text-align: center;
	height: 1.6em;
	width: 1.6em;
	margin-left: 9px;
	margin-bottom:9px;
	cursor: pointer;
	background: transparent url(../img/white-cross.gif) no-repeat scroll center center;
	margin-bottom: 9px;
}
table.popup div.close-button:hover {
	background-image: url(../img/black-cross.gif);
}

/*
table.popup div.help-button {
	float: right;
	text-align: center;
	height: 1.6em;
	width: 1.6em;
	cursor: pointer;

	background: transparent url(../img/white-query.gif) no-repeat scroll center center;
}
body.help-hide table.popup div.help-button { background-image: url(../img/grey-query.gif); }
body table.popup tr td div.help-button:hover { background-image: url(../img/black-query.gif); }
*/
body table.popup div.help-button { float: right; }
div.help-button {
	cursor: pointer;
	vertical-align: middle;
	padding: 0.1em 0.2em 0.4em 0.2em;
	margin: 0.1em 0.2em 0.4em 0.2em;
}
div.help-button span {
	font-size: 0.8em;
	vertical-align: bottom;
}
div.help-button:hover {
	color: #FFF;
}

div.resize-handle {
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 100;
	width: 10px; height: 10px;
	cursor: se-resize;
}

table.popup div.size-div {
	width: 300px;	/* eventual width and height are controlled by contained document */
	height: 200px;
	border: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

/* width and height are controlled by size-div */
/*  We do this in JS now ... too hard to get working without  >  selector
table.popup div.size-div * {
	width: 100%;	
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
}
table.popup div.size-div * * { width: auto; height: auto; }
*/


iframe#coverall, div.coverall-div {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	border: 0;
	padding: 0;
	margin: 0;
}

iframe#coverall {
	background-color: #000;
	opacity: 0.6;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

iframe#coverall.invisible {
	background-color: transparent;
	opacity: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

div.coverall-div {
	font-size: 107%;
	font-weight: bold;
	text-indent: 1em;
	line-height: 3em;
	color: black;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../img/loading-animation.gif);	/* override when the load has finished */
}
div.coverall-div.saving {
	background-image: url(../img/saving-animation.gif);
}

#fake-console {
	position: absolute;
	width: 500px; height: 150px;
	right: 40px; bottom: 80px;
	padding: 5px;
	overflow: auto;
	background-color: white; border: 1px solid black;
	color: black;
	z-index: 1000;
}


/* hide admin-only stuff ... obviously there is server-side protection, this is just cosmetic */
body.is-not-admin *.admin-only { display: none; }
body.is-not-logged-in *.logged-in-only { display: none; }
*.not-logged-in-only { display: none; }
body.is-not-logged-in div.not-logged-in-only { display: block; }


/* good usage pattern: use heurist setDisplayPreference to set "xxx" to "show" or "hide" */
/* and have two classes  xxx  and  not-xxx  */
body.help-show .help { }
body.help-hide .help { display: none; }
body.help-hide .not-help { }
body.help-show .not-help { display: none; }

body.advanced-show .advanced { }
body.advanced-hide .advanced { display: none; }
body.advanced-show tr.advanced { display: table-row}

/*
body.optional-fields-hide .optional, body.optional-fields-hide .optional-fields { display: none; }
body.optional-fields-show .not-optional-fields { display: none; }
*/
body.input-visibility-required .aditional,
body.input-visibility-required .optional,
body.input-visibility-required .optional-fields,
body.input-visibility-required .recommended
{ display: none; }
body.input-visibility-recommended .additional,
body.input-visibility-recommended .optional,
body.input-visibility-recommended .optional-fields,
body.input-visibility-recommended .required-only
{ display: none; }
body.input-visibility-all .not-optional-fields
{ display: none; }

body.advanced tr.advanced
{ display: table-row;}

.totally-hidden, .totally-hidden *, .preload {
	position: absolute;
	width: 0;
	height: 0;
	left: -10000px;
}


/* s-type styling ... used to be in stype.css */

#stype_options {
	display: none;
	position: absolute;
	margin: 2px 1px 1px 1px;
	z-index: 999999;
	width: 200px;
	height: 72px;
	background-image: url(../img/stype/stype-dropshadow.png);
}

#stype_options_child {
	/* background-color: white; */
	/* border: 1px solid #909090; */
	padding: 3px;
	padding-right: 9px;
	position: relative;
	cursor: default;
}
#stype_options a { outline: 0; border: 0; padding: 0; }

#stype_options div.stype_option {
	padding: 2px 4px 2px 24px;
	display: block; border: 0;
	background-repeat: no-repeat;
	background-position: 2px 2px;
	background-color: white;
}
#stype_options div.stype_option:hover, #stype_options div.hover { background-color: #c0c0c0; }
#stype_options div.stype_option img { margin-right: 1ex; }

#stype_options * { text-decoration: none; color: black; cursor: default; font-size: 11px; line-height: 16px; }