/* 
 * Stylesheet for FotoWeb 2.7. Copyright (C) FotoWare a.s. 1997-2002. All rights reserved. 
 *
 * This stylesheet controls both elements that are placed on the page through pure html,
 * and elements that are produced in code. The elements produced in code expects the classes
 * to be named exactly as they are in this stylesheet, so do not rename any elements.
 * 
 * */


/* *******************************************************************
 * 
 * Basic formatting of background and text style 
 * This section controls the general html on the pages that
 * does not have any special formatting requirements and also
 * provides generic appearance that is inherited by the specialized
 * controls.
 *
 * */
body
{
	background-color: #ffffff;
  margin: 0px;
  padding: 0px;
}
body, p, br, nobr, div, span, td, textarea
{
	font-size: 11px;
	font-family: Verdana, Tahoma, Sans-Serif;
}
a
{
	/*color: #4682b4;*/
	color: #00309c;
	text-decoration: none;
}

a.black
{
	/*color: #4682b4;*/
	color: #000000;
	text-decoration: none;
}
a.black:hover
{
	color: #000000;
	text-decoration: underline;
}
a.blue
{
	/*color: #4682b4;*/
	color: #0065ce;
	text-decoration: none;
}
a.blue:hover
{
	color: #408BC6;
	text-decoration: none;
}
h1
{
    FONT-SIZE: 18px;
    COLOR: black
}
h2
{
	font-size: 16px;
	color: black;
}
h3
{
	font-size: 14px;
	color: black;
}
input, select, option
{
	font-size: 11px;
	font-family: Verdana, Tahoma, Sans-Serif;
}
th {
text-align: left;
}

/* *******************************************************************
 * 
 * Generic classes used by many controls in FotoWeb.
 * These can be specialized, but these definitions should
 * generally be enough.
 *
 * */

/* Text input field used in all forms */
.InputControl, .EmphasizedInputControl
{
	font-size: 11px;
	font-family: Verdana, Tahoma, Sans-Serif;
	height: 24px;
	vertical-align: baseline;
	padding-top: 2px;
	padding-left: 3px;
}
/* Input of an important field in a form */
.EmphasizedInputControl
{
	font-weight: bold;
	background-color: #fff8dc;
}

/* The choice (usually a command) is disabled (but not hidden).
 * Grayed out is the default (as with dimmed buttons in the native gui) */
.Disabled
{
	color: #708090;
}

/* The choice (usually a command) should be emphasized as an important
 * choice to attract the user's attention. Bold is the default */
.Emphasized
{
	font-weight: bold;
}

/* Set for a text label or control if the user needs to be specially warned
 * or notified about anything. Note that this is not an error, then the .Error
 * class is used */
.Warning
{
	color: #000099;
}

/* Used for a text label or control when the user must be notified about
 * an error */
.Error
{
	color: #990000;
}

/* A multiline text edit field */
.MultiLineInputControl
{
	font-size: 11px;
	font-family: Verdana, Tahoma, Sans-Serif;
	width: 250px;
	height: 150px;
}

/* A listbox with multiple items (as a list of keywords */
.ListBoxControl
{
	font-size: 11px;
	font-family: Verdana, Tahoma, Sans-Serif;
	width: 250px;
	height: 150px;
}

/* A button */
.ButtonControl, .EmphasizedButtonControl
{
	font-size: 11px;
	font-family: Verdana, Tahoma, Sans-Serif;
	padding-top: 2px;
	padding-bottom: 3px;
}

/* An exceptionally important button */
.EmphasizedButtonControl
{
	font-weight: bold;
	background-color: #fff8dc;
} 

/* *******************************************************************
 * 
 * Classes that control the appearance of elements that appear on all
 * FotoWeb pages, e.g. the title of the page, the toolbars, status line
 * and page navigators
 *
 * */

/* The body pane of the page (by default the white area that contains
 * data and information */
.PageBody
{
	height: 400px;
	background-color: #ffffff;

}

/* The header of the page that contains the title of the page and
 * a description of the page or the current item that the user is
 * working with. */
.PageHeader
{
	padding-right: 2px;
	padding-left: 8px;
	padding-bottom: 10px;
	padding-top: 8px;
	/*border-bottom: #dbd4c5 1px solid;*/
	background-color: #ffffff;
}

.DarkHeader
{
	background-color: #FFA600;
	color: White;
}
.SearchHeader
{
	font-weight: bold;
	background-color: #999999;
	height: 25px;
	color: White;
	padding-left: 5px;
	padding-top: 5px;
}
.RightBorder {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
.BottomBorder {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}

/* The page title text itself. We have not used H1 to allow special
 * customization of this very special text, even though it is by default
 * defined with the same attributes. */
.PageTitle
{
	font-size: 14px;
	color: black;
	font-weight: bold;
	height: 25px;
	padding-top: 4px;
}

/* The toolbar with global and page specific links. Note that the
 * links can have the .Emphasized class, so you might want to override
 * this class for the .Toolbar class to turn it off or change it's appearance.
 * You can do this by defining a class ".Toolbar .Emphasized" and give it the
 * attributes you prefer. */
.Toolbar
{
	padding-right: 2px;
	padding-left: 8px;
	padding-bottom: 2px;
	padding-top: 4px;
	border-bottom: #999999 1px solid;
	background-color: #CCCCCC;
}


/* The CommandToolbar is the toolbar that appears on certain pages to modify
 * either selected objects in a list or the object that the page is currently
 * displaying, e.g. when viewing an album */
.CommandToolbar, .CommandToolbarBBorder
{
	padding-right: 2px;
	padding-left: 8px;
	padding-bottom: 3px;
	padding-top: 3px;
	/*border-bottom: #708090 1px solid;*/
	background-color: #F0F0F0;
	height: 20px;
}

.CommandToolbarBBorder
{
	border-bottom: #dbd4c5 1px solid;
}

/* The ControlPanel contains other controls on a page, e.g. buttons, edit fields
 * and so on. By default, it is not visible by itself, and is not rendered if
 * it does not contain any elements. This class is only provided for those who
 * want to change the design and want the panel to be explicitly shown */
.ControlPanel
{
}



/* A line with status information below the data pane. This is not the same
 * as the status line in the browser! This is a html-controlled element, 
 * and stays the same until the user refreshes the page (and the reason for the
 * status message disappears, of course).
 *
 * The StatusLineMessage and StatusLineWarning classes are specializations when 
 * FotoWeb needs to signal a message or an extra important message. See below */
.StatusLineEmpty, .StatusLineMessage, .StatusLineWarning
{
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 2px;
	padding-top: 2px;
	border-top: #708090 1px solid;
	background-color: #ffffff;
	margin-top: 2px;
}

/* When there is a message in the status line, this specialization
 * is used. Normally, the status line will change color to draw the
 * user's attention. */
.StatusLineMessage
{
	background-color: #ffff99;
}


/* If FotoWeb needs to signal something important on the statusline,
 * this class is used. The default is to change the background-color to yellow,
 * which should catch the user's attention. ;) */
.StatusLineWarning
{
	color: #ffffff;
	background-color: #ff0000;
}



/* The Navigator is the element that allows the user to move between pages
 * in a list or grid. */
.Navigator
{
	color: #3A6B94;
}

/* Specialization of the A:hover class for the Navigator */
.Navigator A:hover
{
	color: #000066;
	text-decoration: underline
}



/* The ImageLinkButton is a control that contains an icon and a text and
 * behaves like a link which posts information back to the server.
 * The control has a special disabled state when the button is shown but not active */
.ImageLinkButton
{
}
.ImageLinkButton A:hover
{
	text-decoration: underline
}
.DisabledImageLinkButton
{
}


/* *******************************************************************
 * 
 * Basic table look, this is used by all lists and information tables.
 * However, the different main types of tables can be customized by specializing
 * these classes 
 *
 * */

/* Index-card style used as the header for a table. This is a 150-pixel
 * wide cell with the header of the table or section. */
.TableTitle
{
	/*background-image: url(./rsrc/TableTitleBackground.gif);*/
	border-top: #C6BFB2 1px solid;
	border-right: #C6BFB2 1px solid;
	border-left: #C6BFB2 1px solid;
	background-color: #C6BFB2;
	color: #000000;
	background-repeat: no-repeat;
	height: 25px;
}

/* Row separating parts of a table containing the header for a section
 * and sometimes the header for the table itself. */
.TitleRow
{
	/*font-weight: bold;*/
	color: #FFFFFF;
	height: 20px;
	background-color: #00309c;
  font-weight: bold;
	/*background-color: #C6BFB2;*/
	/*border-left: #778899 1px solid;*/
}

/* Specializations for links in a title row (the links are normally blue
 * so we must change the color of them to make them visible */
.TitleRow a
{
	text-decoration: none;
}
.TitleRow a:hover
{
	color: #ffffff;
	text-decoration: underline;
}

/* The row containing the column names */
.ColumnHeaderRow
{
	color: #000000;
	height: 20px;
	background-color: #C6BFB2;
	padding-left: 4px;
}

/* A row with information, the main body of the table */
.DataRow
{
	background-color: #c0d2ec;
}

/* Every second row of information has this class, to allow different background color
 * to make it easier for the eye to follow the text along a row */
.AlternatingDataRow
{
	background-color: #F4F2F0;
}

/* A row of information when selected */
.SelectedDataRow
{
	background-color: #DDD9D1;
}

/* If a row in the table is expanded to show more information, this is the class
 * for that row. This row can contain almost any kind of information, depending
 * on the functionality of the control that uses it. */
.DetailInformationRow
{
}



/* *******************************************************************
 * 
 * Specialization classes. By extending these classes, you can easily
 * change the appearance of one control only.
 *
 * Example: If you want to make the AlbumList table look different
 * than all other tables, create and fill the following classes:
 *		.AlbumListTable .TitleRow
 *		.AlbumListTable .ColumnHeaderRow
 *		.AlbumListTable .DataRow
 *		.AlbumListTable .AlternatingDataRow
 *		.AlbumListTable .SelectedDataRow
 *		.AlbumListTable .DetailInformationRow
 *
 * All classes below identify a single control each, and all can be
 * specialized as described above.
 *
 * */

/* Control is displaying a list of albums */
.AlbumListTable
{
}

/* Control is showing all properties of an album */
.AlbumDetailForm
{
}

/* Control is mainly showing lists of groups and users */
.ReportViewTable
{	
}

/* Online registration form */
.RegistrationForm
{
}

/* *******************************************************************
 * 
 * DocumentMatrix classes.
 *
 * This is the class that is used by the .aspx pages that display
 * image lists and grids. It is now called DocumentMatrix since we 
 * are not only dealing with images :)
 *
 * Note: The abbrev. 'DocMtx' is used in stead of 'DocumentMatrix'
 * in all child-definitions
 *
 * */

/* When in grid mode, this is used as the default class for the outermost table */
.DocumentMatrixGrid
{
}

/* When in list mode, this is used as the default class for the outermost table */
.DocumentMatrixList
{
}

/* Each of the main rows in the grid or list */
.DocMtxRow
{
}

/* Every second row in the grid or list */
.DocMtxAltRow
{
}

/* A cell with image information. In grid, there are more than one on each row,
 * when in list mode, there is only one per row. */
.DocMtxCell, .DocMtxSelectedCell
{
	padding: 0px 0px 0px 10px;
	background-color: #ffffff;
	border-right: #EAE5DD 1px solid;
	border-bottom: #EAE5DD 1px solid;
}

/* Every second cell in the grid. When in list mode, this class is not used */
.DocMtxAltCell
{
	padding: 0px 0px 0px 10px;
	background-color: #ffffff;
	border-right: #EAE5DD 1px solid;
	border-bottom: #EAE5DD 1px solid;
}

/* A cell in the grid when the image within has been selected */
.DocMtxSelectedCell
{
	 background-color: #c0d2ec; /* Remove comment to color the entire cell if a file is selected */
}

/* The filename */
.DocMtxFilename
{
  color: #999999;
}

/* The custom iptc-field (if any) displayed in the grid/list */
.DocMtxIptc
{
}

/* The class used for the img-tag holding the thumbnail or preview in the matrix */
.DocMtxPreviewImg
{
	background-color: white;
}

/* The cell that holds the thumbnail or preview in the matrix */
.DocMtxPreviewCell, .DocMtxSelectedPreviewCell
{
	background-color: white;
}

/* The cell that holds the thumbnail in the matrix when the file is selected. */
.DocMtxSelectedPreviewCell
{
	border-right: #ffcc00 3px solid;
	border-top: #ffcc00 3px solid;
	border-left: #ffcc00 3px solid;
	border-bottom: #ffcc00 3px solid;
}

/* The checkbox shown with each thumbnail to allow multiple selection */
.DocMtxItemCheckBox
{
	margin: 0px 0px 0px -4px;
}


/* *******************************************************************
 *
 * TABSTRIP CONTROL
 *
 * These classes control the appearance of the tabstrip control
 * that is used to present different controls as if they were on 
 * separate pages behind eachother.
 *
 * */

/* The class set on the tabstrip table itself */
.TabStrip
{
}

/* The link in each cell */
.TabStripText
{
}

/* A normal tab (not selected) */
.TabStripNormalTab
{
	border-top: #C6BFB2 1px solid;
	border-right: #C6BFB2 1px solid;
	border-left: #C6BFB2 1px solid;
	padding-right: 7px;
	padding-left: 7px;
	padding-bottom: 2px;
	padding-top: 2px;
	/*background-color: #D6E3EE;*/
	background-color: #eae5dd;
}

/* The one (and only) selected tab in the strip */
.TabStripSelectedTab
{
	border-left: #C6BFB2 1px solid;
	border-right: #dbd4c5 1px solid;
	border-top: #C6BFB2 1px solid;
	padding-right: 7px;
	padding-left: 7px;
	padding-bottom: 2px;
	padding-top: 2px;
	/*background-color: #4682b4;*/
	background-color: #C6BFB2;
	color: #ffffff;
	/*font-weight: bold;*/
}
.TabStripSelectedTab .TabStripText
{
	color: #000000;
	/*font-weight: bold;*/
}

/* A disabled (but visible) tab */
.TabStripDisabledTab
{
	border-left: #C6BFB2 1px solid;
	border-top: #C6BFB2 1px solid;
	border-right: #C6BFB2 1px solid;
	padding-right: 7px;
	padding-left: 7px;
	padding-bottom: 2px;
	padding-top: 2px;
	background-color: #eae5dd;
}

/* The line below the tabstrip (that the tabs are attached to)
 * Should have the same background color as the TabStripSelectedTab */
.TabStripEdgeBelowCell
{
	/*background-color: #4682b4;*/
	background-color: #C6BFB2;
	height: 6px;
	padding-right: 7px;
	padding-left: 7px;
}
/* This is the last cell on the filler line which is only used to
 * fill space in the control; hence it has no tabs above it. */
.TabStripEdgeEmpty
{
	border-top: #C6BFB2 1px solid;
	height: 6px;
	padding-right: 7px;
	padding-left: 7px;
	/*background-color: #4682b4;*/
	background-color: #C6BFB2;
}
.fwSelectionList .fwSelectedImage
{

	position             : relative;
	float                : left;
}
.FormButton
{
    BORDER: #00309c 1px solid;
    FONT-SIZE: 11px;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    height: 18px; 
    cursor: pointer;

}


/* Registrationform */
.error { font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
background-color:#FFCC66;
color:#000000;
}
.red {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FF0000;
	font-size: 14px;
}
.small_red_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FF0000;
font-size: 10px;
}

.th {
text-align: left;
padding:2px 2px 2px 2px;
border:1px solid #cccccc;
}

.stdtxt {
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#000000;
}
.TableBox
{
    BORDER-RIGHT: black 1px solid;
    PADDING-RIGHT: 0px;
    BORDER-TOP: black 1px solid;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    BORDER-LEFT: black 1px solid;
    PADDING-TOP: 0px;
    BORDER-BOTTOM: black 1px solid;  
}


div.dropdownheader
{
	width: 100px;
	border: 1px solid #7b9ebd;
	background: #FFFFFF;
	background-image: url(rsrc/ArrowDown.gif);
	background-repeat: no-repeat;
	padding: 1px 5px;
/*	font-weight: 600;*/
	color: #000000;
	background-position: right;
}

div.dropdown, a.dropdown
{
  width: 100px;
  border: 1px solid #7b9ebd;
  background: #FFFFFF;
  padding: 1px 5px;
  color: #000000;
}

a.dropdown
{
  display: block;
  border-bottom: none;
  text-decoration: none;
}

a.dropdown:hover
{
  display: block;
  border-bottom: none;
  background: #c6d3ef;
  text-decoration: none;
}
form.dropdown
{
  position: absolute;
  visibility: hidden;
  border: 1px solid black;
  background: #FFFFEE;
  padding: 0px 5px 2px 5px;
}
table.admininfo {
	border-width: 1px;
	border-spacing: 0px;
	border-style: solid;
	border-color: #CCCCCC;
	border-collapse: collapse;
	background-color: white;
}
table.admininfo th {
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color: #CCCCCC;
	background-color: white;
	-moz-border-radius: 0px;
}
table.admininfo td {
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color: #CCCCCC;
	background-color: white;
	-moz-border-radius: 0px;
}
.dtreeheader
{
    text-align: left;
	  font-size: 14px;
	  color: #000000;
	  font-family: Tahoma, Verdana, Helvetica, Sans-serif;
    PADDING-RIGHT:0px;
    PADDING-LEFT: 2px;
    MARGIN: 0px;
    PADDING-TOP: 0px;  
}
.chArchive
{
	  font-size: 12px;
	  color: #FFFFFF;
	  font-family: Verdana, Arial, Helvetica, Sans-serif;
    background-color:#E0E0E0;
    PADDING: 1px;
    MARGIN: 0px;
    border-bottom: 1px solid #FFFFFF;
}
.chArchiveActive
{
	  font-size: 12px;
	  color: #FFFFFF;
	  font-family: Verdana, Arial, Helvetica, Sans-serif;
    font-weight: bold;
    background-color:#CCCCCC;
    PADDING: 1px;
    MARGIN: 0px;
}
.chFolder
{
	  font-size: 12px;
	  color: #2371A5;
	  font-family: Verdana, Arial, Helvetica, Sans-serif;
    font-weight: bold;
    background-color:#E2F0F1;
    PADDING: 0px;
    MARGIN: 0px;
}
.chCategories
{
	  font-size: 12px;
	  color: #2371A5;
	  font-family: Verdana, Arial, Helvetica, Sans-serif;
    font-weight: bold;
    background-color:#E2F0F1;
    PADDING-left: 10px;
    MARGIN: 0px;
}
.chSearch
{
	  font-size: 12px;
	  color: #000000;
	  font-family: Verdana, Arial, Helvetica, Sans-serif;
    font-weight: bold;
    background-color:#EAF9FE;
    PADDING: 0px;
    MARGIN: 0px;
    border-bottom: 1px dashed #FFFFFF;
}
.help{
cursor:help;
color: red;
font-weight:bold;
}
.handcursor{
cursor:pointer;
}