/* 
 * Stylesheet for FotoWeb 3.0. Copyright (C) FotoWare a.s. 1997-2006. 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.
 *
 *
 *
 * 3.0 palette colors:
 *
 * #000000 - black
 *
 * color variant				grayscale variant
 * #025170 - darkest			#393939
 * #007EB1 - dark				#585858
 * #02AAE9 - normal				#757575
 * #8FD1F3 - lighter			#C1C1C1
 * #D0EDFD - lightest			#E6E6E6
 * #EDF8FE - background			#F5F5F5
 *
 * #FFFFFF - white
 *
 * #708090 - gray
 * #000099 - warning (blue)
 * #990000 - error (red)
 *
 * */


/* *******************************************************************
 * 
 * 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
{
	color				: inherit;					
	background-color	: #ffffff;
	padding				: 0px;
	margin				: 0px;
}
body, p, br, nobr, div, span, td, textarea
{
	font-size			: 11px;
	font-family			: Arial, Helvetica, Sans-Serif;
}


a, a:link, a:visited, a:active
{
	color				: #025170; /*#007EB1;*/
	background-color	: inherit;			/* Addition (PGD051107) */
	text-decoration		: none;
}
a:hover
{
	color				: #025170; /*#007EB1;*/
	background-color	: inherit;			/* Addition (PGD051107) */
	text-decoration		: underline;
}
h1
{
    font-size			: 18px;
    color				: #025170;
    background-color	: inherit;				/* Addition (PGD051107) */
}
h2
{
	font-size			: 16px;
	color				: #025170;
	background-color	: inherit;			/* Addition (PGD051107) */
}
h3
{
	font-size			: 14px;
	color				: #025170;
	background-color	: inherit;			/* Addition (PGD051107) */		
}
input, select, option
{
	font-size			: 11px;
	font-family			: Arial, Helvetica, Sans-Serif;
}


.TopLine
{	
	position			: fixed; 
	top					: 0;
	z-index				: 999; 
	width				: 100%;
}


/* *******************************************************************
 * 
 * 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			: Arial, Helvetica, 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;
	color				: inherit;					
	background-color	: #D0EDFD;
}

/* 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;
	background-color	: inherit;			
}

/* 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;
	background-color	: inherit;			
}

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

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

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

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

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

/* *******************************************************************
 * 
 * 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;
	color				: inherit;					
	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;
	color				: inherit;					
	background-color	: #ffffff;
}

.DarkHeader
{
	background-color	: #025170;
	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;
	background-color	: inherit;			
	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		: #8FD1F3 1px solid;
	color				: inherit;					
	background-color	: #D0EDFD;
}


/* 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;
	color				: inherit;					
	background-color	: #EDF8FE;
	line-height			: 17px;
	height				: 30px;
}

.CommandToolbarBBorder
{
	color				: inherit;					
	border-bottom		: #D0EDFD 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;
	color				: inherit;					
	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
{
	color				: inherit;					
	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;
	background-color	: inherit;			
}

/* Specialization of the A:hover class for the Navigator */
.Navigator A:hover
{
	color				: #000066;
	background-color	: inherit;			
	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			: #02AAE9 1px solid;
	border-right		: #02AAE9 1px solid;
	border-left			: #02AAE9 1px solid;
	background-color	: #02AAE9;
	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	: #D0EDFD;
	/*background-color	: #02AAE9;*/
	/*border-left: #778899 1px solid;*/
}

.TitleRow2
{
	font-weight: bold;
	color: #000000;
	height: 25px;
	background-color: #EDF8FE;
}

/* 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;
	background-color	: inherit;			
	text-decoration		: underline;
}

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

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

/* 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
{
	color				: inherit;					
	background-color	: #F4F2F0;
}

/* A row of information when selected */
.SelectedDataRow
{
	color				: inherit;					
	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				: 0 0 0 10px;
	color				: inherit;				
	background-color	: #ffffff;
	border				: #D0EDFD 1px solid;
	margin-left			: 1px;
	margin-top			: 1px;
}

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

/* A cell in the grid when the image within has been selected */
.DocMtxSelectedCell
{
	color				: inherit;				
	background-color	: #D0EDFD;
	border				: yellow 1px solid;
}

/* 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
{
	color				: inherit;				
	background-color	: white;
}

/* The cell that holds the thumbnail or preview in the matrix */
.DocMtxPreviewCell, .DocMtxSelectedPreviewCell
{
	color				: inherit;				
	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			: #02AAE9 1px solid;
	border-right		: #02AAE9 1px solid;
	border-left			: #02AAE9 1px solid;
	padding-right		: 7px;
	padding-left		: 7px;
	padding-bottom		: 2px;
	padding-top			: 2px;
	/*background-color: #D6E3EE;*/
	color				: inherit;				
	background-color	: #D0EDFD;
}

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

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

/* The line below the tabstrip (that the tabs are attached to)
 * Should have the same background color as the TabStripSelectedTab */
.TabStripEdgeBelowCell
{
	/*background-color	: #4682b4;*/
	color				: inherit;				
	background-color	: #02AAE9;
	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			: #02AAE9 1px solid;
	height				: 6px;
	padding-right		: 7px;
	padding-left		: 7px;
	/*background-color: #4682b4;*/
	color				: inherit;				
	background-color	: #02AAE9;
}


/* *******************************************************************
 * 
 * Table style for the search word highlight table
 *
 * */

/* Main table */
.SearchHighlight
{
	border-top			: #D0EDFD 1px solid;
	border-bottom		: #D0EDFD 1px solid;
	border-right		: #D0EDFD 1px solid;
	border-left			: #D0EDFD 1px solid;
	color				: #000000;
	background-color	: #02AAE9;
	background-repeat	: no-repeat;
}

/* Title row */
.SearchHighlightX TR
{
	color				: inherit;				
	background-color	: #D0EDFD;
}


/* A row with information, the main body of the table */
.SearchHighlightX TD
{
	color				: inherit;				
	background-color	: #F5F5F5;
}