/* 
 * 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;
}
body, p, br, nobr, div, span, td, textarea
{
	font-size: 11px;
	font-family: Tahoma, Verdana, Sans-Serif;
}
a
{
	color: #02517F;
	text-decoration: none;
}
a:hover
{
	color: #000066;
	text-decoration: underline;
}
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: Tahoma, Verdana, Sans-Serif;
}


/* *******************************************************************
 * 
 * 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: Tahoma, Verdana, 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: Tahoma, Verdana, Sans-Serif;
	width: 250px;
	height: 150px;
}

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

/* A button */
.ButtonControl, .EmphasizedButtonControl
{
	font-size: 11px;
	font-family: Tahoma, Verdana, 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: #746d61;
	color: White;
}

/* 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: 25;
	padding-top: 4;
}

/* 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: #dbd4c5 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: #edeceb;
	line-height: 17px;
	height: 30px;
}

.CommandToolbarBBorder
{
	border-bottom: #dEDECEB 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: #000000;
	height: 25px;
	background-color: #EAE5DD;
	/*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: 4;
}

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

/* 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
{
	padding: 0 0 0 10;
	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: 0 0 0 10;
	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: #b0c4de; /* Remove comment to color the entire cell if a file is selected */
}

/* The filename */
.DocMtxFilename
{
}

/* 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;
}

.style1 {
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	font-weight: normal;
}
.style2 {

	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	font-weight: normal;
}
.Data {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
}
.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10;
	color: #FFF;
}