/*
     This is the default CSS file for the Python HTML Widget library.  Feel 
     free to override or edit any of the classes included, but make sure 
     that all definitions are still intact or you may get suprising results!

     Assumptions: 3 column layout (min-width: 800):
	1: Text captions - min-width of 150px
	2: Content - min-width of 550 px
	3: Example/Notes - min-width of 100 px
*/

/********************************************************
 *                   General Styling                    *
 ********************************************************/
body {
	font-family: arial, sans-serif;
	background: white;
}

/* Help */
.help { font-weight: bold; font-size: smaller; position: relative; 
	bottom: .5em }
.help:hover { color:red }

/* VSpace */
div.VSpace { display: block; height: 1em; }

/********************************************************
 *                    Two Column			*
 ********************************************************/
div.pwTwoColumn,div.pwTwoColumnVisible { 
	margin: .2em; padding: .2em; border: ridge thin; 
	display: table; table-layout: auto;
	left: .2em;
	background: #ffeecc; position: relative;
	height: 1.3em; width: 95%; min-width: 650px; }

div.pwTwoColumnHidden { 
	display: none;
	visibility: hidden;
}

div.pwTwoColumn table { width: 100%; }

/* Caption (table style) */
div.pwTwoColumn td.Caption { padding-left: .5em; width: 20em; }

/* Content (table style) */
div.pwTwoColumn td.Content { width: 300px; }

/********************************************************
 *                   Three Column			*
 ********************************************************/
div.pwThreeColumn,div.pwThreeColumnVisible { 
	margin: .2em; padding: .2em; border: ridge thin; 
	display: block; table-layout: fixed;
	background: #ffeecc; position: relative;
	height: 1.3em; width: 98%; min-width: 750px; }

div.pwThreeColumnHidden { 
	display: none;
	visibility: hidden;
}

div.pwThreeColumn table { width: 100%; }

/* Caption */
div.pwThreeColumn td.Caption { width: 10em; }
div.pwCaptionOTD { font-weight: normal; }
div.pwCaptionRTD { font-weight: bold; }

/* Content (table style) */
div.pwThreeColumn td.Content { width: 400px; }

/* Example */
div.pwExample { display: inline; position: relative; min-width: 100px; 
	vertical-align: middle; }

/* Paragraph */
p.pwParagraph {display: inline; }

/********************************************************
 *                   Input Widgets			*
 ********************************************************/

/* Text (css style) */
input.pwTextInput {  }

/* Select */
select.pwSelectorInput { }

/* Select */
select.pwSelectorInput { position: relative; left: 0em; height: 1.4em;}

/* Multi-select */
div.pwSelectorHeader { font-weight: bold; text-align: center; line-height: 1.2em;
	min-width: 180px; display: block; position: relative;  }
select.pwSelectorInputM { height: 170px; min-width: 180px; display: block; 
	position: relative;  }

/* Checkboxes */
div.pwCheckbox { display: inline; }
div.pwCheckboxLabelL { display: inline; }
div.pwCheckboxLabelR { display: inline; }
div.pwCheckboxLabelT { display: block; }
div.pwCheckboxLabelB { display: block; }
input.pwCheckbox { display: inline; }

/* Radio Buttons */
/* div.pwRadioCB { display: inline; } */
div.pwRadioCBLabelL { display: inline; }
div.pwRadioCBLabelR { display: inline; }
div.pwRadioCBLabelT { display: block; }
div.pwRadioCBLabelB { display: block; }
input.pwRadioCB { display: inline; }

/* Radio Buttons */
div.pwRadio2CBgrp { display: inline; } 
div.pwRadio2CB { display: inline; vertical-align: bottom; text-align: center; width: 10em;} 
div.pwRadio2CBLabelL { display: inline; }
div.pwRadio2CBLabelR { display: inline; }
div.pwRadio2CBLabelT { display: block; }
div.pwRadio2CBLabelB { display: block; }
input.pwRadio2CB { display: inline; }

/********************************************************
 *                   Collections			*
 ********************************************************/
/* Table Widget */
div.pwTable {
	background: #ffeecc; width: 100%;
}
table.pwTableTable { font-size: 80%; border: red solid thick; }
caption.pwTableCaption { font-size: 120%; font-weight: bold; margin-bottom: 5px; margin-top: 5px;}

/* Group */
div.pwGroup { 
	border: groove; margin-top: .1em; margin-bottom: .1em ; 
	position: relative; padding: .1em; }
img.pwGroupimage { position: relative; left: 5px; bottom: 2px; 
	display: inline; vertical-align: middle; height: .8em; 
	width: .8em; }
div.pwGroupcaptionO,div.pwGroupcaptionR { position: relative; display: inline; left: 10px; }
div.pwGroupcaptionOTD,div.pwGroupcaptionRTD { display: inline; font-weight: bold; }
div.pwGroupCollapseDiv { border-bottom: thin solid gray; }
div.pwGroupclosed { display: none !important; visibility: hidden; }
div.pwGroupopen { display:block; visibility: visible; }

TD div.pwGroup {
	border: none; margin-top: .1em; margin-bottom: .1em ; 
	position: relative; min-width: 0;
	padding: .1em; }

div.pwTextAreaInput { position: relative; display: table-cell; 
	width: 500px; vertical-align: middle; }

/* Lists */
div.pwList { margin: .0em; padding: .0em; }
div.pwListHeader { font-weight: bold; text-decoration: underline; }
li.pwListLI { padding-top: .5em; }
div.pwListItem>p.pwParagraph { display: inline; font-size: 90%; }
div.pwListItemSubitems { font-size: 75%; font-style: italic; }

/* DoubleSelector */
/* Table approach */
table.pwDoubleSelectorInput {text-align: center;}
table.pwDoubleSelectorInput TD {width: auto;}
div.pwDoubleSelectorInputSelHeader,div.pwDoubleSelectorInputAvailHeader { 
	font-weight: bold; text-align: center; line-height: 1.2em; }
select.pwDoubleSelectorInputSelInputM,select.pwDoubleSelectorInputAvailInputM { 
	width: 14em;
}

/********************************************************
 *                          Tabs                        * 
 ********************************************************/
/* Tabs */

div.content {
	top: .5em;
	left: .5em;
	right: .5em;
	bottom: auto;
}

div.pwTabsContent {
	padding:.5em;
	clear:both;
	background:white;
	color:black;
	border-top:1px solid #ddd;
	border-bottom:1px solid #999;
}

#mainnavtabbed {
	clear:both;
	list-style-type:none;
	margin:0;
	padding:0;
}
#mainnavtabbed li {
	margin-left:5px;
	float:left;
	margin-bottom:-1.30em;
}

#mainnavtabbed li a {
	padding:0 5px;
	border-left:2px outset #aaa;
	border-top:2px outset #aaa;
	border-bottom:1px solid #ddd;
	border-right:2px outset #777;
	background:#999;
	display:block;
	color:white;
	text-decoration:none;
	font-weight:bold;
}
#mainnavtabbed li a.pwTabsTab:hover,#mainnavtabbed li a.pwTabsSelected:hover {
	color:#666;
	background:#bbb;
	border-left:2px outset #ccc;
	border-top:2px outset #ccc;
	border-bottom:1px solid #ddd;
	border-right:2px outset #aaa;
	font-weight:bold;
}
#mainnavtabbed li a.tabon,#mainnavtabbed li a.tabon:hover {
	color:black;
	background:white;
	border-left:2px outset #ddd;
	border-top:2px outset #ddd;
	border-bottom:1px solid white;
	border-right:2px outset #aaa;
	font-weight:bold;
}
#mainnavtabbed li a.pwTabsDisabled {
	padding:0 5px;
	margin-top: 4px;
	border-left:2px outset #aaa;
	border-top:2px outset #aaa;
	border-bottom:1px solid #ddd;
	border-right:2px outset #777;
	background:#ddd;
	display:block;
	color:#666;
	cursor: default;
	text-decoration:none;
	font-weight:normal;
	font-size: 80%;
}
#mainnavtabbed li a.pwTabsDisabled:hover {
}

/********************************************************
 *                  Banner content                      * 
 ********************************************************/
.styles a:visited {text-decoration: none; color: #bb7744; }
.styles a:link {text-decoration: none; color: #bb7744; }
.styles a:hover {text-decoration: none; background: #bb77ff; color: black; }
img.pwHeaderImage {float: left; height: 90px; border: 0px; background: #ffeecc;}
h1.banner {margin: 0px; padding-top: 30px; 
           background-color: #ffeecc; 
           background-image: url("../images/TopHighlightOrange.png");
           background-position: top right; 
	   background-repeat: no-repeat;
           height: 60px; overflow: hidden;
	   font-size: 24px; text-indent: 20px;
}
h2.banner {margin: 0px; padding-top: 15px; background: #eeeeee; height: 35px; overflow: hidden; 
           font-size: 16px; text-indent: 20px;
}
div.styles {float: right; }
h5.styles {margin: 0px; padding: 0px; font-size: 75%; color: black; display: inline; position: relative;
	   top: -1.7em;  }
ul.styles {list-style-type: none; margin: 0px; padding: 0px; display: inline; 
           position: relative; top: -1.3em; }
li.styles {display: inline; font-size: 75%; padding:0 5px; }
a.styles {display: inline; padding:0 5px; }

/********************************************************
 *                  Special-purpose styling		* 
 ********************************************************/
div.pwError {
	color: red;
	width: 98%;
	background: #ffeecc; 
	margin: .2em; padding: .2em; border: thin solid;
}
div.pwError>P.pwError {
	padding-left: 1em;
}
div.pwWarning {
	color: rgb(255,138,63);
	width: 98%;
	background: #ffeecc; 
	margin: .2em; padding: .2em; border: thin solid;
}
div.pwWarning>P.pwWarning {
	padding-left: 1em;
}

/* Errors and warnings -- list approach */
div.pwListError { margin: .0em; padding: .0em; }
div.pwListErrorHeader { font-weight: bold; text-decoration: underline; }
li.pwListErrorLI { padding-top: .5em; }

div.pwListItem>p.pwWarning {
	display: inline;
	color: rgb(255,138,63);
}
div.pwListItem>P.pwError {
	display: inline;
	color: red;
}