/**
 * Stylesheet for FotoWeb 7.0. Copyright (C) FotoWare a.s. 1997-2009. 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                : #3A4249;
    background-color     : #F4F4F4;
    padding              : 0px;
    margin               : 0px;
}

body, p, br, nobr, div, span, td, textarea, input, select, option
{
    font-size            : 12px;
    font-family          : Trebuchet MS, Arial, Helvetica, Sans-Serif;
    font-style           : normal;
    font-weight          : normal;
    text-decoration      : none;
}

a, a:link, a:visited, a:active, a:hover
{
    background-color     : inherit;
    color                : #3A4249;
    font-size            : 12px;
    font-family          : Trebuchet MS, Arial, Helvetica, Sans-Serif;
    font-style           : normal;
    font-weight          : normal;
    text-decoration      : none;
}

a:hover
{
    background-color     : inherit;
    color                : #6600a1;
    font-size            : 12px;
    font-family          : Trebuchet MS, Arial, Helvetica, Sans-Serif;
    font-style           : normal;
    font-weight          : normal;
    text-decoration      : underline;
}

h1
{
    background-color     : inherit;
    color                : #3A4249;
    font-size            : 16px;
    font-family          : Trebuchet MS, Arial, Helvetica, Sans-Serif;
    font-style           : normal;
    font-weight          : bold;
    text-decoration      : none;
}

h2
{
    background-color     : inherit;
    color                : #3A4249;
    font-size            : 14px;
    font-family          : Trebuchet MS, Arial, Helvetica, Sans-Serif;
    font-style           : normal;
    font-weight          : bold;
    text-decoration      : none;
}

.Label,
label /* added normal label tag */
{
    background-color     : inherit;
    color                : #3A4249;
    font-size            : 12px;
    font-family          : Trebuchet MS, Arial, Helvetica, Sans-Serif;
    font-style           : normal;
    font-weight          : bold;
    text-decoration      : none;
}

.ThumbnailIcons
{
    vertical-align       : middle;
    border               : 0px;
    width                : 16px;
    height               : 16px;
}

/********************************************************************************************************
*
* CSS classes for FotoWeb message box control.
*
*/


.fwMessageBox
{
    border               : 1px solid black;
    width                : 500px;
    height               : 300px;
    color                : inherit;
    background-color     : white;
}

.fwMessageBoxTitle
{
    color                : white;
    background-color     : #025170;
    padding              : 5px;
    font-weight          : bold;
}

.fwMessageBoxMessage
{
    padding              : 5px;
    color                : inherit;
    background-color     : white;
    text-indent          : 10px;
}


.fwMessageBoxButtons
{
    color                : inherit;
    background-color     : white;
    padding              : 5px;
    text-align           : center;
}

/* *******************************************************************
 *
 * 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
{
    height               : 24px;
    vertical-align       : baseline;
    padding-top          : 2px;
    padding-left         : 3px;
}

/* Input of an important field in a form */
.EmphasizedInputControl
{
    font-weight          : bold;
}

/* 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                : #3A4249;
    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
{
    width                : 250px;
    height               : 150px;
}

/* A listbox with multiple items (as a list of keywords */
.ListBoxControl
{
    width                : 250px;
    height               : 150px;
}

/* A button */
.ButtonControl, .EmphasizedButtonControl
{
    padding-top          : 2px;
    padding-bottom       : 3px;
}

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

/* *******************************************************************
 *
 * 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                : #3A4249;
    background-color     : #F4F4F4;
}

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

.Titlebar
{
    position             : fixed;
    top                  : 0;
    z-index              : 50;
    width                : 100%;
    height               : 29px;
}

.TitlebarTable
{
    background-color     : #6600a1;
    color                : #FFFFFF;
}

/* 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;*/
    color                : inherit;
    background-color     : #2D3737;
    padding              : 0px;

}

/* 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
{
    padding-right        : 2px;
    padding-left         : 8px;
    padding-bottom       : 3px;
    padding-top          : 3px;
    line-height          : 17px;
    height               : 30px;

    color                : inherit;
    background-color     : #2D3737;
}

#CommandToolBarDiv
{
    width: 100%;
    height: 30px;
    margin: 3px 0 3px  0;
    padding: 0;
}

/* 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           : 1px solid #F4F4F4;*/
    color                : inherit;
    background-color     : #F4F4F4;
    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                : Black;
    background-color     : #FFFF00;
}

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

/* The Navigator is the element that allows the user to move between pages
 * in a list or grid. */
.Navigator
{
    background-color     : inherit;
    color                : #3A4249;
    font-size            : 12px;
    font-family          : Trebuchet MS, Arial, Helvetica, Sans-Serif;
    font-style           : normal;
    font-weight          : normal;
    text-decoration      : none;
}

/* Specialization of the A:hover class for the Navigator */
.Navigator A:hover
{
    background-color     : inherit;
    color                : #6600a1;
    font-size            : 12px;
    font-family          : Trebuchet MS, Arial, Helvetica, Sans-Serif;
    font-style           : normal;
    font-weight          : normal;
    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
{
    border-top           : 1px solid #F4F4F4;
    border-right         : 1px solid #F4F4F4;
    border-left          : 1px solid #F4F4F4;
    background-color     : #F4F4F4;;
    color                : inherit;
    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
{
    height               : 25px;
    font-weight          : bold;
    color                : inherit;
    background-color     : #F4F4F4;
    border-top           : 1px solid #F4F4F4;
    border-bottom        : 1px solid #F4F4F4;
}

.TitleCell
{
    font-weight          : bold;
    color                : inherit;
    background-color     : #F4F4F4;
}

/* The row containing the column names */
.ColumnHeaderRow
{
    font-weight          : bold;
    color                : #F1F1F1;
    background-color     : #6600a1;
    height               : 20px;
    padding-left         : 4px;
}

.ColumnHeaderCell
{
    font-weight          : bold;
    color                : #F1F1F1;
    background-color     : #6600a1;
}

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

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

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

/*****************************************************************************
*
* The following classes are for the list view control.
*
*****************************************************************************/
.ListViewHeader, .ListViewRow, .ListViewRowAlt
{
    height              : 30px;
}

.ListViewRow
{
}

.ListViewRowAlt
{
}

.ListViewHeader
{
}

.ListViewHeaderItem
{
    padding-left        : 5px;
    vertical-align      : middle;
}

.ListViewItem
{
    padding-left        : 5px;
    vertical-align      : middle;
}

/* *******************************************************************
 *
 * 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;
    margin-left          : 1px;
    margin-top           : 1px;
    font-family          : Trebuchet MS, Arial, Helvetica, Sans-Serif;
    font-size            : 11px;
    font-weight          : bold;
    font-style           : normal;
    text-decoration      : none;
    color                : #4B4B4B;
    background-color     : #F4F4F4;
    border               : 1px solid #D0EDFD;
}

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

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

/* The filename */
.DocMtxFilename
{
    font-family          : Trebuchet MS, Arial, Helvetica, Sans-Serif;
    font-size            : 11px;
    font-weight          : bold;
    font-style           : normal;
    text-decoration      : none;
    color                : #4B4B4B;
}

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

/* The cell that holds the thumbnail or preview in the matrix */
.DocMtxPreviewCell, .DocMtxSelectedPreviewCell
{
    color                : inherit;
    background-color     : #FFFFFF;
    border               : 1px solid #C0C0C0;
}

/* The cell that holds the thumbnail in the matrix when the file is selected. */
.DocMtxSelectedPreviewCell
{
    border               : 3px solid #C0C0C0;
}

/* 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
{
    cursor:pointer;
}

/* A normal tab (not selected) */
.TabStripNormalTab, .TabStripDisabledTab
{
    color                : #3A4249 !important;
}

/* The one (and only) selected tab in the strip */
.TabStripSelectedTab
{
    color                : #F1F1F1 !important;
    background-color     : #6600a1 !important;
}

/* A disabled (but visible) tab */
.TabStripDisabledTab
{
}

.TabStripNormalTab, .TabStripSelectedTab, .TabStripDisabledTab
{
    border-top           : 1px solid #6600a1;
    border-right         : 1px solid #6600a1;
    border-left          : 1px solid #6600a1;
    padding-right        : 7px;
    padding-left         : 7px;
    padding-bottom       : 2px;
    padding-top          : 2px;
}

.TabStripSelectedTab .TabStripText
{
}

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

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

/***************************************************************************************************
*
*
* Alerts.css
*
***************************************************************************************************/

/* CSS Document */

.AlertsControl
{
    border               : 0px none;
    border-collapse      : collapse;
}

.AlertsControl tr
{
    height               : 30px;
}

.AlertsControl th
{
    text-align           : left;
    margin               : 0px;
    padding              : 2px 4px;
}

.AlertsControl td
{
    margin               : 0px;
    border-bottom        : 1px solid #CCCCCC;
    padding              : 2px 4px;
}

.SearchTermsHeader
{
    width                : 300px;
}

.ArchiveHeader
{
    width                : 150px;
}

.FrequencyHeader
{
    width                : 150px;
}

.ActionHeader
{
    width                : 150px;
}

.SearchTermsCell
{
}

.ArchiveCell
{
}

.FrequencyCell
{
}

.ActionCell
{
}

.ActionCell a
{
    margin-right         : 5px;
}

/***************************************************************************************************
*
* The following classes are for the tab strip control.
*
***************************************************************************************************/
.TabStripSelected
{
    color                : #F1F1F1;
    background-color     : #6600a1;
}

.TabStripUnselected
{
    color                : #3A4249;
    /*background-color     : #2D3737;*/
}

.TabStripSelected, .TabStripUnselected
{
    padding-bottom      : 6px;
    padding-top         : 6px;
    padding-left        : 10px;
    padding-right       : 10px;
    font-weight         : bold;
    border-top          : solid 1px #BFBFBF;
    border-left         : solid 1px #BFBFBF;
    border-right        : solid 1px #BFBFBF;
    cursor              : default;
    margin-right: 1px;
}

.TabStripPane
{
    padding-top         : 5px;
    padding-bottom      : 15px;
    padding-left        : 5px;
    padding-right       : 5px;
    background-color:   #FFFFFF;
    border              : solid 1px #BFBFBF;

}

#_tbstrp
{
    margin: 10px;

}

.tabHeaderLabel
{
}

.tabHeaderLink
{
}

.gridTable
{
    margin-bottom        : 10px;
}

.firstSearchGroup
{
    margin-top           : 30px;
    font-weight          : bold;
    display              : block;
}
.nextSearchGroup, .sgOnlyList, .sgRange
{
    margin-top           : 10px;
    font-weight          : bold;
    display              : block
}
.sgOnlyList select
{
    position             : absolute;
    left                 : 400px;
    width                : 80px;
}

.sgOnlyList input
{
    position             : absolute;
    left                 : 450px;
    width                : 200px;
}
.sgRange .min, .sgRange .max
{
    position             : absolute;
}
.sgRange select
{
    position             : absolute;
    left                 : 400px;
    width                : 80px;
}
.sgRange .min
{
    left                 : 500px;
    width                : 150px;
}
.sgRange .max
{
    left                 : 650px;
    width                : 150px;
}
#archiveSelect select
{
    width                : 250px;
}
#mediaType select
{
    width                : 250px;
}

.firstSearchGroup .matchTypeSelector, .nextSearchGroup .matchTypeSelector
{
    position             : absolute;
    left                 : 400px;
    width                : 150px;
}
.firstSearchGroup .textInput, .nextSearchGroup .textInput
{
    position             : absolute;
    left                 : 555px;
    width                : 180px;
}
.firstSearchGroup .fieldSelector, .nextSearchGroup .fieldSelector
{
    position             : absolute;
    left                 : 740px;
}
#advancedOptions, #dropDownOptions
{
    margin-top           : 30px;
}
#byline select, #credit select, #source select, #country select, #city select, #supplementalCategory select, #keyword select,
#storage select, #color select, #orientation select, #textStatus select
{
    width                : 350px;
}
/*
#dateRange
{
    background-color     : cyan;
    width                : 800px;
}

#dateRange select
{
    width                : 250px;
}

#dateRange .min, dateRange .max
{
    // position            : auto;
    // left                : auto;

}
*/


/********************************************************************************************************
*
* CSS classes for FotoWeb drop down control.
*
*/

.fwDropDown
{
    border               : 1px solid black;
}

.fwDropDown_Selection
{
    color                : inherit;
    background-color     : white;
}

.fwDropDown_Items
{
    border               : 1px solid black;
}

.fwDropDown_Item
{
    color                : inherit;
    background-color     : white;
}

/********************************************************************************************************
*
* CSS classes for FotoWeb preview size list control.
*
*/

span.PreviewSizeList
{
    font-weight          : bold;
    padding              : 5px;
}

select.PreviewSizeList
{
}

img.PreviewSizeList
{
}




/********************************************************************************************************
*
* Browser-dependant styles for the div boxes in default.fwx
*
*/
.Search, .Login
{
    border               : solid 0px red;
    width                : 450px;
    height               : 130px;
    padding              : 15px;
    position             : relative;

    text-align           : center;
    vertical-align       : top;
    margin               : 15px;
    position             : relative;



    

    margin-top   : -40px;

    

}

/********************************************************************************************************
*
* Server Error Page
*
*/

.ServerErrorPage
{
    border               : solid 1px #E6E6E6;
    padding              : 5px;
}

.ServerErrorAssistance
{
    border               : solid 1px #E6E6E6;
    background-color     : #FFFFCC;
    margin               : 5px;
    padding              : 15px;
}

/********************************************************************************************************
*
* System Log Page
*
*/

.SystemLogPage
{
    padding              : 5px;
}


/********************************************************************************************************
*
* Sessions List Page
*
*/

.SessionListPage
{
    padding              : 5px;
}


/********************************************************************************************************
*
* Privacy control (copyright and Terms & Conditions
*
*/

#privacyFooter
{
    font-size:11px;
    text-align:center;
    margin-top: 200px;
/*    margin-top: 80px;*/
}

#privacyFooter.defaultPageFooter
{
    position: fixed;
    bottom: 5px;
    right: 10px;
    margin-top: 0;
    text-align: inherit;
    color: white;
    font-size:  12px;;
}

#privacyFooter span
{
    font-size: 11px;
}

#privacyFooter .companyName
{
    margin-right: 10px;
}

#privacyFooter a
{
    font-size: 11px;
}

#privacyFooter.defaultPageFooter a
{
    color:  white;
    font-size: 11px;
    margin-right: 10px;
}
#privacyFooter.defaultPageFooter img.shareIcon
{
    cursor:pointer;
}

/********************************************************************************************************
*
* Album controls
*
*/


.AlbumListControl
{
}

.AlbumListControlEx
{
}

.AlbumPropertiesControl
{
}

.AlbumNameEdit
{
}

.AlbumDescriptionEdit
{
}

.AlbumPropertiesControlEx
{
}

.AlbumSelectionControl
{
}

.AlbumSharingControl
{
}

.AlbumPageContents
{
}

.AlbumInvitationControl
{
    padding           :5px;
}

.AlbumInvitationListControl
{
}

.AlbumContactSheetControl
{
    padding           :5px;
}

.EmailSubject
{
    width             : 400px;
}

.EmailMessage
{
    width             : 400px;
    height            : 100px;
}

.EmailRecipientSelectionControl
{
}

/*****************************************************************************
*
* The following classes are for the tool bar control.
*
*****************************************************************************/

.CheckedOutFileTab
{
    width               : 500px;
}

/******************************************************************************/
/******************************************************************************/
/* Xenario - overrides */
/******************************************************************************/
/******************************************************************************/

/*body, p, br, nobr, div, span, td, textarea, input, select, option, a
{
    color: #4b4b4b;
    font-family: "Trebuchet MS", Arial;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;

}
body
{
    background-color: #F4F4F4;
}
*/

body{
    /* preview page creates Problems with min-width: 1100 */
    /*min-width: 1100px; /* left some space for IE scroll bars */

    /* forcing high resolution */
    min-width: 1255px; /* left some space for IE scroll bars */
}
/* special rules for the image note popup */
body.page-imagenote{
    min-width: 1px;
}
body.page-imagenote #MainFrame{
    padding-top: 15px;
}

body.page-imagenote .TopRow{
    width: 350px;
}

body.page-imagenote .ImageNodeEditField textarea{
    width: 350px;
}

body.loading{
    /*
        Indicates that the program is busy and the user should wait.
        Often rendered as a watch or hourglass.
    */
    cursor: progress;
}

form
{
    margin: 0px;
    padding: 0px;
}
/*
h1, h2, h3, h4, h5, h6
{
    color: #999c9e;
    font-family: "Trebuchet MS", Arial;
}

a, a:link, a:visited
{
    color: #4b4b4b;
    background-color: transparent;
    font-family: "Trebuchet MS", Arial;
}

a:hover
{
    color: #1a9ccd;
    background-color: transparent;
    cursor: pointer;
    font-family: "Trebuchet MS", Arial;
}
*/
a:hover{
    cursor: pointer;
}
/* Nodes with the class "node-tpl" will be hidden nodes in HTML used by
   javascript to add new code dynamically. Therefore logical javascript code is
   separated from nearly all HTML. Additionally the Template-Designer could
   work on the Template further on.
*/
.node-tpl{
    display: none;
}

/* overrides */
.CommandToolbar
{
    border: none;
    height: auto;
    width: auto;
    padding: 0px;
    margin: 0px;
}

.TitlebarTable{
    background-image: url(/fotoweb/rsrc/header_gradient_t.png);
    background-repeat: repeat-x;
    background-position: bottom left;
}

.Titlebar
{
    position: relative;
    height: auto;
    margin-bottom: 15px;
}

a.TitleBarCloseMe:hover,
a.TitleBarLogin:hover,
a.TitleBarLogout:hover,
a.TitleBarCheckout:hover,
a.TitleBarOutbox:hover
{
    background-color:transparent;
    text-decoration: underline;
}

a.TitleBarLogin,
a.TitleBarLogout{
    background: transparent url(/fotoweb/rsrc/icon_logout.png) left center no-repeat;
    padding-left: 20px;
    height: 17px;
    line-height: 17px;
    color: #FFFFFF;
    display: inline-block;
}

a.TitleBarCloseMe{
    padding-left: 20px;
    padding-right: 5px;
    height: 17px;
    line-height: 17px;
    display: inline-block;
}

a.TitleBarCheckout{
    background: transparent url(/fotoweb/rsrc/checkout_bu.png) no-repeat scroll 0 0;
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    height: 26px;
    line-height: 26px;
    padding: 0 5px 0 30px;
    text-align: left;
    width: 90px;
    color: #ddd;
}



a.TitleBarCheckout:hover{
    background-position: 0 -28px;
    color: #eee;
    text-decoration: none;
}

a.TitleBarOutbox{
    background: transparent url(/fotoweb/rsrc/outbox_bu.png) no-repeat scroll 0 0;
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    height: 26px;
    line-height: 26px;
    padding: 0 5px 0 30px;
    text-align: left;
    width: 90px;
    color: #ddd;
}


a.TitleBarOutbox:hover{
    background-position: 0 -28px;
    color: #eee;
    text-decoration: none;
}


.TitleBarActions{
    float: right;
    padding-right: 20px;
}

#Logo
{
    /*background: url(/fotoweb/cmdrequest/GetAppearanceLogoMain.fwx) no-repeat;*/
    /*background: url(/fotoweb/rsrc/fotoware_logo.png) no-repeat;*/
    margin: 15px;
    /*
        height: 27px;
        width: 137px;*/
}

.Toolbar
{
    background: url(/fotoweb/rsrc/bar_gradient.png) top repeat-x;
    height: 50px;
    padding: 5px;
    position: relative;
}

.CommandToolbar{
    height: 36px;
}

#CommandToolBarDiv
{
    float: left;
    margin: 0 0 0 8px;
    padding: 0px;
    width: 100%;
    position: relative;
    z-index: 100;
}

.KeywordsAndExtSearch a{
    line-height:12px;
    color: #FFFFFF;
}

.SearchFieldContainer,
.KeywordsAndExtSearch
{
    float: left;
}

.KeywordsAndExtSearch
{
    padding-left: 10px;
}

.TopMenuContainer{
    left:340px;
    position:absolute;
    right:20%;
    top:5px;
}

/* we need a table for browsers, who don't care about 'display="table"' */
.TopMenuContainer table{
    margin: 0 auto;
}

.TopMenuContainer .TopMenu{
    margin:0;
    padding:0;
    position:relative;
    z-index:10;
    float: left;
}

.TopMenuContainer .TopMenu li,
.TopMenuContainer .TopMenu li a
{
    background-color: transparent;
    cursor: pointer;
    color: #000000;
    z-index: 500;
    display: block;
    font-size: 12px;
}

.TopMenuContainer .TopMenu li a
{
    padding:4px 4px 0 10px;
}

.TopMenuContainer .TopMenu li > ul li:first-child
{
    background: transparent url(/fotoweb/rsrc/topNaviBg_t.png) no-repeat top center;
    padding-top: 11px;
    width: 158px;
}

.TopMenuContainer .TopMenu li > ul li span
{
    display: block;
    background: transparent url(/fotoweb/rsrc/topNaviBg_c.png) repeat-y;
    padding: 1px 7px;
    width: 144px;
}

.TopMenuContainer .TopMenu li > ul{
    background: transparent url(/fotoweb/rsrc/topNaviBg_b.png) no-repeat bottom center;
    padding-bottom: 11px;
    width: 158px; /* for an ie graphic bug*/
    left: 95%;
}
.TopMenuContainer .TopMenu > li > ul,
.multilvl-menu .scroller{
    top: 75% !important;
    left: -5px !important;
}

.TopMenuContainer .TopMenu li > ul > li + li a
{
    background: url(/fotoweb/rsrc/separator.gif) top center repeat-x;
}

.TopMenuContainer .TopMenu li a:hover
{
    background-color: #6600a1; /*#1A9CCD;*/
    text-decoration: none;
    color: #F1F1F1;
}

.TopMenuContainer .TopMenu > li
{
    background:transparent url(/fotoweb/rsrc/top_button.png) no-repeat scroll 0 0;
    font-size:14px;
    font-weight:bold;
    height:26px;
    line-height:23px;
    margin:0 2px;
    padding:0;
    width:148px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
}

.TopMenuContainer .TopMenu > li:hover
{
    background-position: 0 -30px;
}

.TopMenuContainer .TopMenu > li > span
{
    color:#ECEAEB;
    display:inline-block;
    font-weight:bold;
    height:26px;
    line-height:26px;
    margin-left:6px;
    padding-left:20px;
}

.TopMenu .isCurrent{
    font-weight: bold;
}

.multilvl-menu .scroller{
    background: transparent url(/fotoweb/rsrc/topNaviBg_t.png) no-repeat scroll 0 0;
    padding: 11px 0px;
}

.multilvl-menu .scroller .scrollContainer {
    height:299px;
    width: 144px;
    background: transparent url(/fotoweb/rsrc/topNaviBg_c.png) repeat-y scroll 0 0;
    padding: 0 7px;
    overflow: hidden;
    position: relative;
}

.multilvl-menu .scroller .bottom{
    background: transparent url(/fotoweb/rsrc/topNaviBg_b.png) no-repeat scroll 0 0;
    position: absolute;
    bottom: 0px;
    height: 11px;
    width: 100%;
}

.multilvl-menu .scroller li{
    width: 144px;
}

.multilvl-menu .scroller li a{
    background: transparent url(/fotoweb/rsrc/separator.gif) repeat-x scroll 50% 100%;
    padding: 4px 4px 3px 10px;
}

.multilvl-menu .scroller li{
    background: transparent url(/fotoweb/rsrc/separator.gif) repeat-x scroll 50% 0;
}
.multilvl-menu .scroller li + li{
    background: none;
}

.multilvl-menu .scroller .scrollUp,
.multilvl-menu .scroller .scrollDown{
    width: 158px;
}

.multilvl-menu .scroller .scrollUp{
    background: transparent url(/fotoweb/rsrc/topNaviBg_c.png) repeat-y scroll 0 0;
}

.multilvl-menu .scroller .scrollDown{
    background: transparent url(/fotoweb/rsrc/topNaviBg_c.png) repeat-y scroll 0 0;
}

.multilvl-menu .scroller .scrollUp > span,
.multilvl-menu .scroller .scrollDown > span{
    padding: 0px;
    margin: 0px;
    width: auto;
    display: block;
}

.multilvl-menu .scroller .scrollUp > span{
    background: transparent url(/fotoweb/rsrc/up_arrow.png) no-repeat 50% 0;
    height: 16px;
}

.multilvl-menu .scroller .scrollDown > span{
    background: transparent url(/fotoweb/rsrc/down_arrow.png) no-repeat 50% 0;
    height: 16px;
}

.multilvl-menu .scroller .scrollUp:hover > span,
.multilvl-menu .scroller .scrollDown:hover > span{
    background-position: 50% -16px;
}

.multilvl-menu .scroller .goRight > span,
.multilvl-menu .scroller .goBack > span{
    display: none;
}

.multilvl-menu .scroller .goRight,
.multilvl-menu .scroller .goBack{
    position: absolute;
    background: transparent;
    width: 16px;
}
.multilvl-menu .scroller .goRight{
    background:transparent url(/fotoweb/rsrc/right_arrow.png) no-repeat scroll -16px 50%;
    border-left:1px solid #BABABA;
    height:25px;
    right:2px;
    top:0;
}
.multilvl-menu .scroller .goRight:hover{
    background-position: 0px 50%;
}
.multilvl-menu .scroller .goBack:hover{
    background-position: -16px 0;
}

.multilvl-menu .scroller .goBack{
    height: 16px;
    top:10px;
    left:8px;
    border-right: 1px solid #BABABA;
    background: url(/fotoweb/rsrc/left_arrow.png) no-repeat 0 0;
}

.TopMenuArchives{
    background: url(/fotoweb/rsrc/icon_archive.png) no-repeat left;
}

.TopMenuViews{
    background: url(/fotoweb/rsrc/icon_view.png) no-repeat left;
}

.TopMenuTools{
    background: url(/fotoweb/rsrc/icon_tool.png) no-repeat left;
}

.TopMenuAdministration{
    background: url(/fotoweb/rsrc/icon_config.png) no-repeat left;
}

#KeywordCloud .popdiv-content div{
    padding: 10px;
    text-align: justify;
}

#KeywordsPopUpTrigger{
    display: none;
}

#searchInputField
{
    border: none;
    margin: 0px;
    padding: 0;
    width: 165px;
    height: 15px;
    padding: 4px 25px 6px 6px;
    position: relative;
    float: left;
    font-family: "Trebuchet MS";
    font-size: 13px;
    color: #ffffff;
}

.searchInputField_Inactive
{
    background: url(/fotoweb/rsrc/searchInput_bg_i.png) no-repeat;
}

.searchInputField_Active
{
    background: url(/fotoweb/rsrc/searchInput_bg_a.png) no-repeat;
}

#SearchSubmit
{
    background: url(/fotoweb/rsrc/searchButton_bg.gif) no-repeat;
    border: none;
    margin: 0;
    padding: 0;
    font-size: 11px;
    font-family: "Trebuchet MS";
    font-weight: bold;
    width: 34px;
    height: 24px;
    color: #e2e2e2;
    cursor: pointer;
}

.SearchFieldContainer
{
    position: relative;
}

#SearchPopUp
{
    background-color: #E6E6E6;
    width: 165px;
    display: none;
    position: absolute;
    padding: 15px;
    z-index: 500;
    left: 0px;
    top: 100%;
    margin-left:2px;
    margin-top: 0px;
    border-radius: 0 0 5px 5px;
    box-shadow: 1px 1px 8px 1px #555;
}


#SearchPopUp .OverallAndResults > div
{
    width: 65px; /* for dipshit IE7 */
}

#SearchPopUp .OverallAndResults
{
    overflow: hidden;
    margin: 5px 0 10px 0;
    padding-bottom: 10px;
    background: url(/fotoweb/rsrc/fp_seperator.gif) repeat-x bottom;
}

#SearchPopUp .OverallAndResults label
{
    float: right;
    line-height: 18px;
}

#SearchPopUp .OverallAndResults div
{
    float: left;
    margin-left: 10px;
}

#SearchPopUp .Type
{
    clear: both;
}

#SearchPopUp .Type label
{
    float: left;
    width: 50px;
}
#SearchPopUp .Date
{
    clear: both;
}
#SearchPopUp .Date label
{
    float: left;
    width: 50px;
}

#SearchPopUp .Type select,
#SearchPopUp .Date select
{
    padding: 1px;
    width: 120px;
    font-size: 11px;
}

#MainFrame
{
    padding: 0 12px 15px;
}

/* common grid class*/
.Grid{
    clear: both;
}

#MainFrameOpacityLayer
{
    /*
    display: none;
    background-color: #000;
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5000;
    */
}

.TopRow
{
    padding-right: 7px;
    position: relative;
    margin-bottom: 5px;
    z-index: 5;
}

.TopRow .content > h1{
    margin: 0 10px 0 12px;
    float:left;
}

.TopRow > .content
{
    background:transparent url(/fotoweb/rsrc/grid_headnavi_bg.png) no-repeat scroll 0 0;
    height:39px;
    line-height:39px;
    position:relative;
    z-index:10;
    padding-left: 7px;
}

/* will be used for the bar closer */
.TopRow .extra1{
    background:transparent url(/fotoweb/rsrc/grid_headnavi_end_bg.png) no-repeat scroll 100% 0;
    height:39px;
    left:auto;
    position:absolute;
    right:0;
    top:20px;
    width:7px;
}

#PreviewFrame .TopRow .extra1{
    top : 0;
}

.TopRowSub{
    clear: both;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
    margin-left:12px;
}

/* TopRowDropDown */

.TopRowDropDownContainer
{
    position: relative;
    float: left;
}

.TopRowDropDownContainer
{
    margin-right: 40px
}

/*
.TopRowDropDownSwitch
{
    width: 60px;
    height: 35px;
    padding: 0px 10px;
    cursor: pointer;
}
*/
/*
.TopRowDropDownSwitch.Active
{
    background: url(/fotoweb/rsrc/layoutPanel_bu_bg.png) no-repeat;
    color: #ffffff;
}
*/

/*
.TopRowDropDownSwitch span
{
    display: block;
    background: url(/fotoweb/rsrc/icon_layout.png) no-repeat left;
    padding-left: 20px;
    line-height: 39px;
    width: 80px;
}

*/
.TopRowDropDown
{
    background:transparent url(/fotoweb/rsrc/layoutPanel_bg.png) no-repeat scroll 0 0;
    display:none;
    height:192px;
    position:absolute;
    right:-1px;
    top:29px;
    width:228px;
    z-index:10;
}

.TopRowDropDown > .content{
    padding: 15px;
}

.TopRowDropDownButton
{
    background:transparent url(/fotoweb/rsrc/general_bu.png) no-repeat scroll 0 0;
    border:medium none;
    color:#FFFFFF;
    cursor:pointer;
    display:block;
    height:26px;
    line-height:27px;
    margin:0 auto;
    overflow:hidden;
    width:100px;
}
.TopRowDropDownButton span{
    background:transparent url(/fotoweb/rsrc/icon_disk.png) no-repeat scroll 0 50%;
    display:inline-block;
    line-height:25px;
    margin:0 0 0 9px;
    padding-left:20px;
    width:60px;
}

.TopRowDropDown .content input{
    margin-left:35px;
}

.TopRowDropDown .Actions{
    background: transparent url(/fotoweb/rsrc/separator.gif) repeat-x 0 0;
    margin-top: 8px;
    padding-top: 15px;
}


.labeledLeft span
{
    display:block;
    float:left;
    padding:0 4px 0 4px;
    text-align:right;
    width:100px;
}

.labeledRight span
{
    display:block;
    float:right;
    padding:0 4px 0 4px;
    text-align:left;
    width:100px;
}

.downloadpopup-images{
    height: 220px;
    overflow: auto;
    position: relative;
}
.downloadpopup-image-container{
}
.downloadpopup-image-container > div{
    float: left;
    margin: 14px;
    height: 82px;
    width: 82px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.downloadpopup-image-container > div > div{
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0px;
}
.downloadpopup-image {
}

.downloadpopup-profile-container{
    margin-top: 10px;
    border-top: 1px solid #c6c6c6;
    clear: both;
    padding:11px 1px;
    overflow: hidden;
}

a.downloadpopup-profile{
    display: block;
    float: left;
    width: 215px;
    height: 38px;
    background: url(/fotoweb/rsrc/download_profile_bg.png) 0 0 transparent no-repeat;
    line-height: 38px;
    padding-left: 20px;
    padding-right: 35px;
    font-size: 12pt;
    font-weight: bold;
    color: #fff;
    overflow: hidden;
    margin: 2px;
}
a.downloadpopup-profile:hover{
    background-position: 0 -38px;
    color: #fff;
    text-decoration: none;
}

.single .downloadpopup-image-container > div{
    float: none;
    margin: 0px auto;
    height: 240px;
    width: 220px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.downloadpopup-images.single {
    height: auto;
    overflow: hidden;
}

.single .downloadpopup-image-container > div > div{
}

.DownloadPopUp .content-container{
    width: 560px;
}
.KeywordCloudPopUp .content-container{
    width: 400px;
}

.KeywordCloudPopUp .content{
    text-align: justify;
}

.PreviewSizePopUp{
}

.AlbumCreateControl{
    display: table;
    margin: 0 auto;
}

.AlbumCreateControl .AlbumNameEdit,
.AlbumCreateControl .AlbumDescriptionEdit{
    width: 200px;
}

/*
* Column classes
*/

.Column{
    /* standard column will float left */
    float:left;
    /* possibly rules for all columns */
}
.right{
    float:right;
}
.left{
    float:left;
}
.SmallCol{
    width: 150px;
}
.MediumCol{
    width: 250px;
}
.BigCol{
    width: 350px;
}
.rightOf{
    padding-left: 10px;
    overflow: hidden;
}
.leftOf{
    padding-right: 10px;
    overflow: hidden;
}

/* NavigationPaneControl (start)*/
#NavigationPaneControl
{
    clear: both;
    width: 233px;
    float: left;
    /*height: 600px;*/ /* needed for the NavigationPane hiding switch*/
}

#NavigationPaneControl .InnerContainer
{
    /* backward compatibillity */
    background: url(/fotoweb/rsrc/navigationPanel_bg.png) no-repeat bottom center;
    position: relative;
    /*height: 230px;*/
    display: none;
    padding: 5px 10px;
    max-height: 700px;
    overflow: auto;
}

#NavigationPaneControl .Container{
    background: url(/fotoweb/rsrc/navigationPanel_bg.png) no-repeat bottom center;
}

/* backward compatibillity */
#NavigationPaneControl .Container .InnerContainer{
    background: none;
}

#NavigationPaneControl .PanelHeader
{
    display: block;
    background: url(/fotoweb/rsrc/naviPane_bu_i.png) no-repeat;
    color: #e2e2e2;
    margin: 0;
    padding: 0;
    height: 34px;
    line-height: 34px;
    padding:0 30px 0 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight:bold;
    text-decoration: none;
    position: relative;
}


#NavigationPaneControl .Selection .PanelHeader
{
    cursor: default;
}

#NavigationPaneControl a.PanelHeader:hover
{
    background: url(/fotoweb/rsrc/naviPane_bu_o.png) no-repeat;
    color: #FFF;
}

#NavigationPaneControl .DisabledPanel .PanelHeader {
    color: #e2e2e2;
    cursor: default;
}
#NavigationPaneControl .DisabledPanel .PanelHeader:hover {
    background: url(/fotoweb/rsrc/naviPane_bu_i.png) no-repeat;
    color: #e2e2e2;
}

#NavigationPaneControl .OpenedPanel .PanelHeader,
#NavigationPaneControl .OpenedPanel .PanelHeader:hover
{
    background: url(/fotoweb/rsrc/naviPane_bu_a.png) no-repeat;
    color: #FFF;
}

#NavigationPaneControl .Actions .InnerContainer{
    overflow: visible; /* accomplishing the overlapping submenus */
    z-index: 10;
    padding: 5px 3px;
}

#NavigationPaneControl .Actions .InnerContainer li{
    background: transparent;
    width: auto;
    height: 22px;
}

#NavigationPaneControl .Actions .InnerContainer a
{
    white-space:nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    display: block;
    padding-left: 25px;
    padding-right: 5px;
    height: 22px;
    line-height: 22px;
    margin: 0px 0px;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: 5px 50%;
    position: relative;
}

#NavigationPaneControl .Actions .InnerContainer a:hover
{
    background-color: #DADADA;
}

#NavigationPaneControl .Actions .InnerContainer a ul
{
    display: block;
    float: right;
    position: static;
}

#NavigationPaneControl .Actions .InnerContainer a ul li
{
    display: none;
}

#NavigationPaneControl .Actions .InnerContainer .hover a ul li
{
    display: inline-block;
}

#NavigationPaneControl .Actions .InnerContainer a ul.ratingButtons li a
{
    background: url(/fotoweb/rsrc/star.png) no-repeat 0 -30px;
    width: 12px;
    height : 15px;
    margin : 0;
    padding : 0px;
}

#NavigationPaneControl .Actions .InnerContainer a ul.ratingButtons li a.hover
{
    background-position: 0 -14px
}


#NavigationPaneControl .Actions .InnerContainer a ul.ratingButtons li a.delete
{
    background: url(/fotoweb/rsrc/delete.png) no-repeat 0 3px;
}

#NavigationPaneControl .Actions .InnerContainer a ul.ratingButtons li a.delete.hover
{
    background-position: 0 -13px;
}

#NavigationPaneControl .Actions .InnerContainer a ul.priorityButtons li a
{
    width: 14px;
    height : 18px;
    margin : 0;
    padding : 0px;
    background-position: 2px 5px;
}

#NavigationPaneControl .Actions .InnerContainer a ul.rotateButtons li a
{
    height : 16px;
    margin : 0;
    padding : 0px;
    margin-top: 3px;
}

#NavigationPaneControl .Actions .InnerContainer a ul.rotateButtons li.rotate1 a
{
    background: url(/fotoweb/rsrc/icon_previous.png);
    width: 16px;
}
#NavigationPaneControl .Actions .InnerContainer a ul.rotateButtons li.rotate2 a
{
    background: url(/fotoweb/rsrc/icon_next.png);
    width: 18px;
}
#NavigationPaneControl .Actions .InnerContainer a ul.rotateButtons li.rotate3 a
{
    background: url(/fotoweb/rsrc/icon_rotate.png);
    width: 16px;
}



#NavigationPaneControl .Actions .InnerContainer .submenu-indicator{
    background:transparent url(/fotoweb/rsrc/icon_arrow.png) no-repeat scroll 0 0;
    height:16px;
    position:absolute;
    right:5px;
    top:3px;
    width:16px;
    display: none;
}

#NavigationPaneControl .Actions .InnerContainer .submenu-indicator.active{
    display: block;
}

#NavigationPaneControl .Actions .InnerContainer .hover .submenu-indicator{
    background-image: url(/fotoweb/rsrc/icon_arrow_o.png);
}

#NavigationPaneControl .ActionsList.multilvl-menu ul li a
{
    margin: 0px;
    text-decoration: none;
}

#NavigationPaneControl .ActionsList.multilvl-menu li > ul
{
    background:transparent url(/fotoweb/rsrc/topNaviBg_b_long.png) no-repeat scroll bottom center;
    padding-bottom:11px;
    left: 98%;
    top: -10px;
    width:230px;
}

#NavigationPaneControl .ActionsList.multilvl-menu li > ul li:first-child
{
    background:transparent url(/fotoweb/rsrc/topNaviBg_t_long.png) no-repeat scroll top center;
    padding-top:11px;
    width:230px;
}

#NavigationPaneControl .ActionsList.multilvl-menu li > ul span
{
    background:transparent url(/fotoweb/rsrc/topNaviBg_c_long.png) repeat-y scroll 0 0;
    display:block;
    padding:0px 7px;
    /*width:144px;*/
}

#NavigationPaneControl .MenuSeperator
{
    background: url(/fotoweb/rsrc/seperator.gif) repeat-x 0 50%;
    height: 100%;
    width: auto;
    margin: 0px 4px;
}


#NavigationPaneControl .Selection .PanelHeader
{
    background-image: url(/fotoweb/rsrc/naviPane_bu_a.png) ;
    color: white;
}


#NavigationPaneControl .Selection .PanelHeader .selectionCounter
{
    font-size: 12px;
    font-weight: normal;
}

#NavigationPaneControl .SelectionItem
{
    margin: 0 4px 10px 0;
    float: left;
    height: 76px;
    width: 63px;
    position: relative;
}

#NavigationPaneControl .SelectionItem.loading
{
    background: url(/fotoweb/rsrc/load_selection-item.gif) no-repeat 50% 30% transparent;
}

#NavigationPaneControl .SelectionItem img
{
    height: 63px;
    width: 63px;
    border: none;
    margin: 0;
    padding: 0;
}

#NavigationPaneControl .SelectionItemRemove
{
    background:transparent url(/fotoweb/rsrc/selection_bu.gif) no-repeat scroll 0 0;
    bottom:0;
    color:#FFFFFF;
    cursor:pointer;
    font-size:9px;
    font-weight:normal;
    height:13px;
    left:0;
    line-height:13px;
    padding-left:15px;
    position:absolute;
    width:48px;
}

#btnClearSelection{
    background: transparent url(/fotoweb/rsrc/icon_clearSelection.png) no-repeat 0 0;
    height: 16px;
    width: 16px;
    position: absolute;
    right:8px;
    top:8px;
}

#btnShowSelection{
    background-color: gray;
    border-radius: 0 5px 5px 0;
    padding-right: 5px;
    line-height: 26px;
    padding-left: 5px;
    vertical-align: top;
    border-left: 1px solid white;
    height: 26px;
    position: absolute;
    right: 3px;
    top: 4px;
    cursor: pointer;
}


#btnShowSelection:hover
{
    background-color: #777777;
}

/* NavigationPaneControl (end)*/

/* ThumbContainer styles (start) */

.DocMtxCell,
.DocMtxSelectedCell
{
    border: none;
    padding: 0;
    margin: 0;
    background: none;
}

.DocMtxSelectedCell .ThumbContainer,
body.page-shoppingcart .ThumbContainer
{
    /*background: #FEFEFE;*/
    background: #FFFFFF;
    border: 2px solid #ba1fb5;
}

.ThumbContainer{
    float: left;
    display: block;
    font-size: 10px;
    position: relative;
    /*
    border: 1px solid gray;
    */
    margin:10px 10px 25px 20px;
    width: 170px;
    padding: 2px;
    background-color: #F4F4F4;
    border: 2px solid #F4F4F4;
}

.ThumbContainer.selection
{
    margin: 10px 10px 0px 0px; 
    padding: 5px;
    width: 150px;
    border: 1px solid #C0C0C0;
    position: relative;
}

.ThumbContainer.selection .removeFromSelectionButton
{
    right: -7px;
    top: -7px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    z-index: 10;
    background-image: url('/fotoweb/rsrc/removeSelection.png');
    cursor: pointer;
}

.ThumbContainer.selection .removeFromSelectionButton:hover
{
    background-position: 0 25px;
}


/*#1A9CCD;*/
.hover .ThumbContainer{
    border: 2px solid #C0C0C0;
    background-color: #FFFFFF;
}

/* disabling hover effect for the shopping cart */
body.page-shoppingcart .hover .ThumbContainer{
    background: #FFFFFF;
}

body.page-shoppingcart .ObjectName{
    font-weight: bold;
}
body.page-shoppingcart .ObjectName,
body.page-shoppingcart .Description{
    margin-bottom: 20px;
}
body.page-shoppingcart .Source,
body.page-shoppingcart .Credit{
    display: inline;
}

body.page-shoppingcart .Source span,
body.page-shoppingcart .Credit span{
    font-weight: bold;
}

body.page-shoppingcart .Source label,
body.page-shoppingcart .Credit label{
    display: inline-block;
    text-align:right;
}

body.page-shoppingcart .Credit label{
    margin-left: 100px;
}

body.page-shoppingcart .ProcessingInfos{
    position:absolute;
    right:0;
    top:20px;
    border-left: 1px dotted #c1c1c1;
    height: 100%;
    padding-left: 5px;
}

body.page-shoppingcart .ProfileSelect{
    margin: 0 0 10px;
    padding:0 0 10px 10px;
    border-bottom: 1px dotted #c1c1c1;
}
body.page-shoppingcart .ProfileSelect label{
    display: block;
    padding-left: 20px;
    height: 20px;
    background: transparent url(/fotoweb/rsrc/icon_disk.png) no-repeat 0 0;
    line-height:18px;
}
body.page-shoppingcart .Remove{
    padding:0 0 10px 10px;
}
body.page-shoppingcart .Remove a{
    display: block;
    padding-left: 20px;
    height: 20px;
    background: transparent url(/fotoweb/rsrc/icon_bin.png) no-repeat 0 0;
}

body.page-shoppingcart .ShoppingCartInfos {
    height:280px;
    overflow:hidden;
    padding:20px 190px 10px 10px;
    position:relative;
    max-width:460px;
    min-width:280px;
}

body.page-shoppingcart .ThumbContainer .Actions{
    display: none;
}
/**** Priority Color codes (start) ****/
.Priority.Prio0{
    background-color: transparent;
    border-color: #bbb;
}
.Priority.Prio1{
    background-color: #C5A8C3;
    border-color: transparent;
}
.Priority.Prio2{
    background-color: #DD7B8F;
    border-color: transparent;
}
.Priority.Prio3{
    background-color: #F4C33E;
    border-color: transparent;
}
.Priority.Prio4{
    background-color: #F8F99F;
    border-color: transparent;
}
.Priority.Prio5{
    background-color: #3BA37E;
    border-color: transparent;
}
.Priority.Prio6{
    background-color: #58B4D1;
    border-color: transparent;
}
.Priority.Prio7{
    background-color: #0082B2;
    border-color: transparent;
}
.Priority.Prio8{
    background-color: #6600a1;
    border-color: transparent;
}
/**** Priority Color codes (end) ****/

.ThumbContainer .Thumb{
    clear: both;
    width: 170px;
    height: 170px;
    position: relative;
}
.ThumbContainer .Thumb .InnerThumb{
    text-align: center;
    position: absolute;
    bottom: 0px;
    width: 100%; /* 'inheriting' the width from the parent */
}

.ThumbContainer .Thumb .InnerThumb img{
    margin: 0px;
    padding: 0px;
    border-style: none;
    border-width: 0;
    vertical-align: bottom; /* IE7 fix */
}

.ThumbContainer .Priority{
    display: block;
    margin-bottom: 2px;
    line-height:2px;
    cursor:pointer;
    display:block;
    line-height:5px;
    height: 5px;
    margin-bottom:2px;
    border-width: 1px;
    border-style: dotted;
}

.ThumbContainer .PrioSelector{
    position: absolute;
    top: 10px;
    left: 0px;
    left: 50%;
    line-height: normal;
    z-index:100;
    margin-left: -79px;
}

.ThumbContainer .PrioSelector ul{
    list-style-image:none;
    list-style-type:none;
    padding:0;
    margin: 0;
}

.ThumbContainer .PrioSelector ul > li:first-child{
    background:transparent url(/fotoweb/rsrc/topNaviBg_t_stretched.png) no-repeat scroll 50% 0;
    padding-top:11px;
}

.ThumbContainer .PrioSelector ul > li{
    background:transparent url(/fotoweb/rsrc/topNaviBg_c.png) repeat-y scroll 0 0;
    padding:2px 10px;
    width:138px;
    margin: 0px;
}

.ThumbContainer .PrioSelector a{
    display: block;
    padding-left: 25px;
    padding-right: 5px;
    background-position: 0 50%;
    background-repeat: no-repeat;
}

.ThumbContainer .PrioSelector a:hover{
    background-color: #C8C8C8;
}

.ThumbContainer .PrioSelector ul{
    background:transparent url(/fotoweb/rsrc/topNaviBg_b.png) no-repeat scroll bottom center;
    padding-bottom:11px;
}

.ThumbContainer .StatusRow{
    height: 17px;
    /*
        position: absolute;
        z-index:10;
        top: 10px;
    */
}

.ThumbContainer .StatusRow .StatusLocked
{
    float : left;
    margin-right: 3px;
}

.ThumbContainer .StatusRow .StatusHasCoordinates
{
    float: left;
}

.ThumbContainer .StatusRow .imageNote
{
    height: 16px;
    float: right;
}

.ThumbContainer .StatusRow .imageNote a
{
    vertical-align: bottom;
}

.ThumbContainer .Actions{
    border-color:#B1B1B1;
    border-style:dotted;
    border-width:1px 0;
    margin:5px 0 4px;
    overflow:hidden;
    padding:3px 0;
    text-align:center;
}

.ThumbContainer .Actions span{
    padding: 0;
    cursor: pointer;
}

.ThumbContainer .Actions .Selection,
.ThumbContainer .Actions .Download,
.ThumbContainer .Actions .CMSExport ,
.ThumbContainer .Actions .Zoom
{
    display:inline-block;
    height:16px;
    margin:0 0.2em;
    width:16px;
}

.ThumbContainer .Actions .Selection
{
    background: url(/fotoweb/rsrc/icon_lightbox.png) no-repeat;
}
.ThumbContainer .Actions .Download
{
    background: url(/fotoweb/rsrc/icon_disk_mirrored.png) no-repeat;
}
.ThumbContainer .Actions .CMSExport
{
    background: url(/fotoweb/rsrc/icon_export_to_cms_dual.png) no-repeat;
}
.ThumbContainer .Actions .Zoom
{
    background: url(/fotoweb/rsrc/icon_zoom.png) no-repeat;
}

.ThumbContainer .Actions span:hover{
    background-position: 0 -16px;
}

.DocMtxSelectedCell .ThumbContainer .Actions .Selection
{
    background-position: 0 -32px;
}

.DocMtxSelectedCell .ThumbContainer .Actions .Selection:hover
{
    background-position: 0 -16px;
}

.ThumbContainer .Rating{
    clear:both;
    margin:0 auto;
    overflow:hidden;
    width:72px;
    visibility: hidden; /* at first don't show it to prevent seeing the radio buttons */
}
.ThumbContainer .Name{
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    overflow:hidden;
    white-space:nowrap;
}
.ThumbContainer .Info {
    font-size:10px;
    margin:0 auto;
    width:170px;
}
.ThumbContainer .Info label{
    display:inline-block;
    font-size:10px;
    padding-right:2px;
    text-align:right;
    width:80px;
}

.ThumbContainer .Info span{
    font-size:10px;
    color: #3A4249;
}

body.page-shoppingcart .SelectableImage{
    clear: left;
}

/* ThumbContainer styles (end) */

/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */

div.rating-cancel,
div.star-rating {
    float: left;
    width: 12px;
    height: 16px;
    text-indent: -999em;
    cursor: pointer;
    display: block;
    background: transparent;
    overflow: hidden
}

div.rating-cancel,div.rating-cancel a {
    background: url(/fotoweb/rsrc/delete.png) no-repeat 0 -16px;
}

div.star-rating,div.star-rating a {
    background: url(/fotoweb/rsrc/star.png) no-repeat 0 0px
}

div.rating-cancel a,div.star-rating a {
    display: block;
    width: 12px;
    height: 100%;
    background-position: 0 0;
    border: 0
}

div.star-rating-on a {
    background-position: 0 -16px!important
}

div.star-rating-hover a {
    background-position: 0 -32px
}

/* Read Only CSS */

div.star-rating-readonly a {
    cursor: default !important
}

/* Partial Star CSS */

div.star-rating {
    background: transparent!important;
    overflow: hidden!important
}

/* END jQuery.Rating Plugin CSS */


/* Page Navigation (start) */
#pageNavigationWrapper
{
    position: relative;
    left: 50%;
    float:left;
    clear: both;
}

#pageNavigation
{
    text-align: center;
    position: relative;
    left: -50%;
    float:left;
}

#pageNavigation.bottomPageNavigation
{
    display: block;
}

p#clear
{
    clear:both;
}

#pageNavigation a
{
    text-decoration: none;
    display: block;
    height: 23px;

    line-height: 26px;
}

#pageNavigation a
{
    background: url(/fotoweb/rsrc/paging_sep.jpg) no-repeat right center;
}

#pageNavigation .PagerElement
{
    float: left;
    padding: 3px 0px 3px 0px;
}

#pageNavigation .PagerPrevious,
#pageNavigation .PagerNext
{
    padding: 0;
}

#pageNavigation .PagerPrevious a
{
    background: url(/fotoweb/rsrc/paging_bu_left_i.gif) no-repeat;
    width: 29px;
    height: 29px;
}

#pageNavigation .PagerPrevious a:hover,
#pageNavigation .PagerPrevious a:active
{
    background: url(/fotoweb/rsrc/paging_bu_left_a.gif) no-repeat;
}

#pageNavigation .PagerNext a
{
    background: url(/fotoweb/rsrc/paging_bu_right_i.gif) no-repeat;
    width: 29px;
    height: 29px;
}

#pageNavigation .PagerNext a:hover,
#pageNavigation .PagerNext a:active
{
    background: url(/fotoweb/rsrc/paging_bu_right_a.gif) no-repeat;
}

#pageNavigation .PagerNum,
#pageNavigation .PagerFirst,
#pageNavigation .PagerLast
{
    background: url(/fotoweb/rsrc/paging_bg.jpg) repeat-x;
    width: 35px;
}

#pageNavigation .CurrentPage a
{
    background-color: #1A9CCD;
    color: #ffffff;
}
/* Page Navigation (end) */

body.page-upload .UploadButton{
    background: transparent url(/fotoweb/rsrc/upload_bg.png) no-repeat 0 0;
    width: 233px;
    height: 39px;
    float:left;
    position: relative;
    cursor: pointer;
}

body.page-upload .UploadButton span {
    color:#FFFFFF;
    display:block;
    font-size:12px;
    font-weight:bold;
    height:1.1em;
    left:10px;
    overflow:hidden;
    position:absolute;
    top:12px;
    width:145px;
}

/* album view (start) */
.page-viewalbum .TopRow .content > div {
    margin: 0 10px 0 0;
    line-height: 40px;
}
/* album view (end) */

/* Status Pages like Password change or Fotoweb Desktop */

#statusBox {
    text-align:            left;
    position:              relative;
    margin:                0 auto;
    display:               block;
    top:                   40px;
    width:                 45%;
    min-width:             450px;
    border:                1px solid #BFBFBF;
    background-color:      #FFFFFF;
    padding:               30px 30px 30px 90px;
}

#statusBox .infoIcon {
    position:               absolute;
    top:                    30px;
    left:                   30px;
}

#statusBox h1 {
    font-size: 18px;
    margin: 0;
}

#statusBox p, #statusBox table td {
    font-size: 13px;
    line-height: 1.6;
}

#statusBox table {
    border-top: 1px dotted #BFBFBF;
    padding: 10px 0 0 0;
    width: 100%;
}

#statusBox table td {
    padding: 0 10px 10px 0;
}

#statusBox table td.label {
    width: 40%;
}

#statusBox table td.input {
    width: 60%;
}

#statusBox .link {
    background: transparent url(/fotoweb/rsrc/fw_arrow.png) 0 0 no-repeat;
    padding: 2px 0 5px 20px;
}

#statusBox ul {
    margin: 0;
    padding: 0;
}

#statusBox li {
    list-style-type: none;
    background: transparent url(/fotoweb/rsrc/fw_arrow.png) 0 0 no-repeat;
    padding: 2px 0 5px 20px;
}

#statusBox .actionWrapper
{
    margin-top: 30px;
}

#manualInstall
{
    text-align:            left;
    position:              relative;
    border:                1px solid #BFBFBF;
    width:                 80%;
    min-width:             400px;
    padding:               30px 30px 30px 90px;
    background-color:      #FFFFFF;
    top:                   0px;
    height:                auto;
    min-height:            250px;
    display:               none;
}

/* barview (start) */
.page-barview{
    min-width: 0;
}
/* barview (end) */

.MainFrameText{
    padding-left: 18px;
}

/* Appearence backend adaptations (start)*/
#InfoConfig .TopRowDropDownSwitch span,
#LayoutSwitch span{
    color: #3A4249;
}
#InfoConfig .TopRowDropDownSwitch.Active span,
#LayoutSwitch.Active span{
    color: #fff;
}

/* Appearence backend adaptations (end)*/

/* treeview adaptations (start) */
.treeview,.treeview ul {
    margin: 0;
    padding: 0 0 0 0;
    list-style: none;
}
.treeview ul {
    padding: 0 0 0 15px;
}

.treeview ul {
    /*background-color: white;*/
    margin-top: 1px;
}

.treeview li{
    clear: both;
}

.treeview > li{
    float: left;
}

.treeview .hitarea {
    /*
    background: url(images/treeview-default.gif) -64px -25px no-repeat;
    height: 16px;
    width: 16px;
    margin-left: -16px;
    */
}

.treeview .hitarea {
    /*
    display: none;

    */
    height: 23px;
    width: 15px;
    cursor: pointer;
    float: left;
}

.treeview a{
    float: left;
    line-height: 23px;
}
.treeview .collapsable > a{
    font-weight: bold;
}
.treeview li a{
    padding-left: 5px;
}
.treeview .expandable > .hitarea{
    background: url(/fotoweb/rsrc/structure_plus.gif) transparent no-repeat 0 50%;
}
.treeview .collapsable > .hitarea{
    background: url(/fotoweb/rsrc/structure_minus.gif) transparent no-repeat 0 50%;
}
/* treeview adaptations (end) */

/* Grid view adaptations (start) */
#divGrid
{
    /*margin-left: 200px;*/
    min-height:400px;
    position: static;
    padding-left: 7px;
    margin-bottom: 10px;
    width: auto;
    overflow: visible;
    margin-left: 233px;
}

.SearchHitsInfoBox{
    font-size: 12px;
    margin-bottom: 20px;
    margin-left:12px;
}

#gridTable
{
    /*height: 550px;*/
    overflow: auto;
    position: relative;
}



#GridTopRow h1
{
    font-size: 14px;
    font-weight: bold;
    padding: 0 0 0 12px;
    margin: 0px;
    height: 39px;
    line-height: 39px;
    overflow: hidden;
    white-space: nowrap;
}

#GridHeaderTools
{
    height: 39px;
    position: relative;
    float: right;
}

/* QuickText */

div.quickTextWrapper
{
    float: left;
    height: 10px;
    width: 120px;
}

#quickTextControl1.quickTextControl
{
    position: relative;
}

.quickTextControl label.qtShowHideBtn
{
    padding-left:  25px;
    padding-bottom: 20px;
    cursor: pointer;
    position: absolute;
    font-weight: normal;
    line-height: 26px;
    padding-right: 10px;
    
    border-radius: 5px;
    margin-top: 6px;
    background-position: 5px 6px;
    background-repeat: no-repeat;
    background-image: url("/fotoweb/rsrc/icon_edit.png");
}

input#showQtChk1.qtShowHideBtn {
    display:none;
}

.quickTextControl label.qtShowHideBtn.active{
    background-color: #00ABE4;
    -moz-box-shadow:    1px 1px 8px 1px #555;
    -webkit-box-shadow: 1px 1px 8px 1px #555;
    box-shadow:         1px 1px 8px 1px #555;
    color: white;
}


#quickTextControlArea1
{
    position: absolute;
    top: 35px;
    width: 180px;
    padding: 2px 10px;
    background-color: #e6e6e6;
    -moz-box-shadow:    1px 1px 8px 1px #555;
    -webkit-box-shadow: 1px 1px 8px 1px #555;
    box-shadow:         1px 1px 8px 1px #555;
    -moz-border-radius: 5px 0 5px 5px; 
    -webkit-border-radius: 5px 0 5px 5px; 
    border-radius: 0px 0px 5px 5px; 
}

#quickTextControlArea1 select,#quickTextControlArea1 input[type=text]
{
    width: 70%;
    float: right;
    margin-top: 9px;
}
#quickTextControlArea1 select
{
    width: 73%;
}

.qtInputSection
{
    border-bottom: 1px solid white;
    margin-bottom: 10px;
}

/* QuickText END */


#LayoutSwitchContainer,
#ImageScaleSliderContainer
{
    position: relative;
    float: left;
}

#ImageScaleSliderContainer
{
    margin-right: 40px;
    padding:13px 0;
}

#ImageScaleSlider
{
    width: 150px;
}

/* for better feeling of reloading the grid page the images
will be made visible by javascript on the right time */
.ThumbContainer.selection .Thumb
{
    width: 150px;
    height: 150px;
}

.ThumbContainer .Thumb img
{
    display: none;
}

.ThumbContainer.selection .Thumb img
{
    display: inline;
}

.ThumbContainer.selection .Name
{
    margin: 5px 0;
}

#LayoutSwitchContainer{
}

#LayoutSwitch,
.TopRowDropDownSwitch
{
    height: 39px;
    cursor: pointer;
    padding-left:12px;
}

#LayoutSwitch .rslider,
.TopRowDropDownSwitch .rslider{
    padding-right:15px;
}

#LayoutSwitch.Active,
.TopRowDropDownSwitch.Active
{
    background:transparent url(/fotoweb/rsrc/toprowDropDown_bg_l.png) no-repeat scroll left top;
    color:#FFFFFF;
    position:relative;
    z-index:20;
    min-width:70px;
}

#LayoutSwitch.Active .rslider,
.TopRowDropDownSwitch.Active .rslider
{
    background:transparent url(/fotoweb/rsrc/toprowDropDown_bg_rslider.png) no-repeat scroll right top;
}

#LayoutSwitch span,
.TopRowDropDownSwitch span
{
    display: block;
    background: url(/fotoweb/rsrc/icon_layout.png) no-repeat left;
    padding-left: 20px;
    line-height: 39px;
}

#LayoutDropdown{

    background-color: #e6e6e6;
    display:none;

    padding:0;

    position:absolute;

    right:6px;

    top:36px;

    width:210px;

    z-index:10;
    padding: 2px 10px;
    -moz-box-shadow:    1px 1px 8px 1px #555;
    -webkit-box-shadow: 1px 1px 8px 1px #555;
    box-shadow:         1px 1px 8px 1px #555;
    -moz-border-radius: 5px 0 5px 5px; 
    -webkit-border-radius: 5px 0 5px 5px; 
    border-radius: 5px 0 5px 5px; 

}







#LayoutDropdown .GridOption{

    line-height: 15px;

    margin: 6px 0;

}



#LayoutDropdown .GridOption label{

}



#LayoutDropdown .GridOption label span{

    display: inline-block;

    width: 85px;

}

#LayoutDropdown .Group{

    background: transparent url(/fotoweb/rsrc/separator.gif) repeat-x 0 0;

    overflow:hidden;

    padding:5px 0 0;

}

#LayoutDropdown .Group .GridOption{

    float: right;

    margin: 0px;
    margin-right: 15px;

}

#LayoutDropdown.AlbumLayoutDropdown .Group .GridOption
{
    margin-right: 5px;
}

#LayoutDropdown .GridOption select
{
    width: 117px;
}



#LayoutDropdown .Group .GroupLabel{

    float:left;

    line-height:20px;

}



#LayoutDropdown .LayoutActions{

    background: transparent url(/fotoweb/rsrc/separator.gif) repeat-x 0 0;

    margin-top: 3px;

    clear: both;

    padding:8px 0 3px;

}

/* Grid view adaptations (end) */

/* Default view adaptations (start) */
body.page-default
{
    background: url(/fotoweb/rsrc/fp_background.jpg) repeat-x center;
}

#Logo
{
    margin: 15px;
}

#StartPageImages
{
    position: relative;
    width: 1100px;
    height: 285px;
    margin: 115px auto;
}

#StartPageImages .Image
{
    /* float: left;*/
    position: absolute;
    /*text-align: center;*/
    padding: 4px 4px 0 4px;
}

#StartPageImages div img
{
    /* will be needed for javascript vertical positioning */
    position: relative;
}

#StartPageImages #Image1
{
    height:165px;
    left:20px;
    top:100px;
    width:220px;
    z-index:2;
}

#StartPageImages #Image2
{
    height:195px;
    left:180px;
    top:40px;
    width:260px;
    z-index:1;
}

#StartPageImages #Image3
{
    height:225px;
    left:396px;
    top:0;
    width:300px;
}

#StartPageImages #Image4
{
    height:195px;
    right:180px;
    top:40px;
    width:260px;
    z-index:1;
}
#StartPageImages #Image5
{
    height:165px;
    right:20px;
    top:100px;
    width:220px;
    z-index:2;
}

.ImageTopShadow
{
    position: absolute;
    background: url(/fotoweb/rsrc/dropshadow_fp_t.png) repeat-x top center;
    top: 0px;
    left: 4px;
    right: 4px;
    height: 4px;
}

.ImageLeftShadow
{
    position: absolute;
    background: url(/fotoweb/rsrc/dropshadow_fp_l.png) repeat-y left top;
    top: 4px;
    left: 0px;
    bottom: 0px;
    width: 4px;
}

.ImageRightShadow
{
    position: absolute;
    background: url(/fotoweb/rsrc/dropshadow_fp_r.png) repeat-y right top;
    top: 4px;
    right: 0px;
    width: 4px;
    bottom: 0px;
}

.imgContainersContainer
{
    position: relative;
}

.imgContainer
{
    position: absolute;
}

#LoginAndSearch
{
    position: relative;
    top: -230px;
    margin: 0 auto;
    overflow: hidden;
    z-index: 10;
    height: 177px;
    width: 333px;
    padding: 8px;
}

#innerLoginAndSearch
{
    height: 177px;
    overflow: hidden;
    background-color: #fff;
}

.Panel_T,
.Panel_TR,
.Panel_R,
.Panel_BR,
.Panel_B,
.Panel_BL,
.Panel_L,
.Panel_TL
{
    position: absolute;
}

.Panel_TL,
.Panel_T,
.Panel_TR,
.Panel_BL,
.Panel_B,
.Panel_BR
{
    height: 8px;
}

.Panel_L,
.Panel_R,
.Panel_TL,
.Panel_TR,
.Panel_BL,
.Panel_BR
{
    width: 8px;
}

/* using stretching to accomplish the outline */
.Panel_T
{
    background: url(/fotoweb/rsrc/fp_panel_t.png) repeat-x;
    top: 0px;
    left: 8px;
    right: 8px;
}
.Panel_TR
{
    background: url(/fotoweb/rsrc/fp_panel_tr.png) no-repeat;
    top: 0px;
    right: 0px;
}
.Panel_R
{
    background: url(/fotoweb/rsrc/fp_panel_r.png) repeat-y;
    top: 8px;
    /* stretching doesn't work for IE7 */
    /*bottom: 8px;*/
    height: 177px;
    right: 0px;
}

.Panel_BR
{
    background: url(/fotoweb/rsrc/fp_panel_br.png) no-repeat;
    right: 0px;
    bottom: 0px;
}
.Panel_B
{
    background: url(/fotoweb/rsrc/fp_panel_b.png) repeat-x;
    left: 8px;
    right: 8px;
    bottom: 0;
}
.Panel_BL
{
    background: url(/fotoweb/rsrc/fp_panel_bl.png) no-repeat;
    left: 0;
    bottom: 0;
}
.Panel_L
{
    background: url(/fotoweb/rsrc/fp_panel_l.png) repeat-y;
    top: 8px;
    /* stretching doesn't work for IE7 */
    /*bottom: 8px;*/
    height: 177px;
    left: 0px;
}
.Panel_TL
{
    background: url(/fotoweb/rsrc/fp_panel_tl.png) no-repeat;
    top: 0;
    left: 0;
}

#LoginAndSearch h2
{
    font-size: 22px;
    font-weight: normal;
    padding: 0px;
    margin: 0px 0px 15px 0px;
    color: #22292F;
}

#Login,
#Search
{
    text-align: left;
    height: 150px;
    width: auto;
    margin: 0;
    padding: 15px;
    /*border: 1px solid black;*/
    background: #fff url(/fotoweb/rsrc/fp_panel_bg.jpg) repeat-x;
    position: relative;
}

#LoginAndSearch form
{
    background: url(/fotoweb/rsrc/fp_seperator.gif) no-repeat bottom;
    height: 138px;
    padding: 0px;
    margin: 0px;
}

#searchContainer
{
    margin-top: 30px;
}

#idFwSearch
{
    background: url(/fotoweb/rsrc/fp_searchinput_bg.png) no-repeat;
    border: none;
    width: 246px;
    height: 22px;
    padding: 4px 8px;
    font-size: 16px;
    float: left;
}

#idFwSubmit
{
    background: url(/fotoweb/rsrc/fp_searchbutton_bg.png) no-repeat;
    border: none;
    padding: 0px;
    margin: 0px;
    width: 32px;
    height: 30px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

#LoginAndSearch .Actions{
    overflow: hidden;
    padding: 5px 0 0 0;
}

#LoginAndSearch a{
    float: right;
    height: 16px;
}

#LoginAndSearch #switchSearchToLogin,
#LoginAndSearch #switchLoginToSearch
{
    float: left;
    padding-left: 20px;
}

#switchSearchToLogin
{
    background: url(/fotoweb/rsrc/icon_login.png) no-repeat 0px 0px;
}
#switchLoginToSearch{
    background: url(/fotoweb/rsrc/icon_zoom.png) no-repeat 0px 0px;
}

a#switchLoginToSearch:hover{
    background-position: 0px -16px;
}

#LoginSubmit
{
    cursor: pointer;
    background: url(/fotoweb/rsrc/general_bu.png) no-repeat;
    width: 103px;
    height: 28px;
    text-align: center;
    border: none;
    margin: 4px;
    padding-bottom: 5px;
    color: #fff;
    padding-bottom: 5px;
    font-size: 14px;
}

#divUserName label,
#divPassword label
{
    float: left;
    line-height: 25px;
    width: 100px;
}

#divUserName
{
    margin-bottom: 5px;
}

#divUserName input,
#divPassword input
{
    background: url(/fotoweb/rsrc/fp_inputfield_bg2.png) no-repeat;
    width: 185px;
    height: 18px;
    padding: 4px 8px;
    font-size: 14px;
    border: none;
    margin: 0;
}

#LoginSubmit
{
    float: right;
}

#Remembering
{
    margin-top: 8px;
}

#chkRemember
{
    float: left;
    margin-left: 0;
}

#chkRememberLabel
{
    line-height: 20px;
}

/* Default view adaptations (end)*/

/* Preview view adaptations (start) */
#PreviewFrame
{
    margin-left: 240px;
}

.backToOverview
{
    float: left;
}

.backToOverview a
{
    display: block;
    background: url(/fotoweb/rsrc/icon_back.png) no-repeat left;
    padding-left: 20px;
    line-height: 39px;
    font-size: 12px;
}

#InfoConfig
{
    float: right;
}

#InfoConfig .TopRowDropDownSwitch span
{
    background:transparent url(/fotoweb/rsrc/icon_config.png) no-repeat left center;
    display: block;
    line-height: 39px;
    padding-left: 20px;
}

#QuickSteps
{
    float: right;
}

#InfoConfig .TopRowDropDown .labeledRight
{
    height: 17px;
    line-height: 17px;
}

#InfoConfig .labeledRight span,
#InfoConfig .labeledLeft span
{
    width: 130px;
}

.PreviewThumb
{
    float: left;
    padding-left: 3px;
}

.PreviewThumbCell
{
    width: 450px;
    height: 450px;
    vertical-align: middle;
    text-align: center;
    background-color: #F8F8F8;
    border: 1px solid #E5E5E5;
    padding: 1px;
}

.PreviewThumbCell embed
{
    display: none;
}

.page-preview .Priority{
    float: left;
    display: block;
    margin-bottom: 2px;
    /* IE7 needs line height, instead of height */
    line-height:4px;
    width: 160px;
    margin-top: 8px;
}

.page-preview .Rating{
    float: right;
}

#QuickSteps a,
#QuickSteps a:hover{
    display:inline-block;
}

.previousImageLink
{
    background: url(/fotoweb/rsrc/icon_previous.png) no-repeat;
    background-position: left center;
    font-size:12px;
    line-height:39px;
    padding-left:20px;
}

.nextImageLink
{
    background: url(/fotoweb/rsrc/icon_next.png) no-repeat;
    background-position: right center;
    font-size:12px;
    line-height:39px;
    padding-right:20px;
}

.previousImageLink.disabled{
    background-image: url(/fotoweb/rsrc/icon_previous_disabled.png);
    cursor: default;
    text-decoration:none;
    color:gray;
}

.nextImageLink.disabled{
    background-image: url(/fotoweb/rsrc/icon_next_disabled.png);
    cursor: default;
    text-decoration:none;
    color:gray;
}

span.Label
{
    display: block;
    padding:0 5px 0 0;
    margin: 3px 0px;
}

.Seperator
{
    border-top: 1px #B2B2B2 dotted;
    margin: 10px 0px;
}

.PreviewInfo
{
    margin-left: 480px;
    margin-right: 10px;
}

.PreviewInfo .permalinkWrapper
{
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 428px;
}

.AllInfoContainers
{
    margin-top: 20px;
}

.AllInfoContainers .Label{
    min-width:200px;
}

.InfoContainer .Switch
{
    background: url(/fotoweb/rsrc/prevBar_i.gif) no-repeat;
    width: 499px;
    height: 31px;
    color: #F1F1F1;
    line-height: 31px;
    padding: 0px 10px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.InfoContainer .Switch.Active,
.InfoContainer .Switch.Active.Over
{
    background: url(/fotoweb/rsrc/prevBar_a.gif) no-repeat;
}

.InfoContainer .Switch.Over
{
    background: url(/fotoweb/rsrc/prevBar_o.gif) no-repeat;
}

.InfoContainer .Dropdown
{
    background: url(/fotoweb/rsrc/prevBar_bg.gif) bottom no-repeat;
    width: 499px;
    /*height: 234px;*/
    display: none;
    padding: 5px 10px;
}
/* Preview view adaptations (end) */

/**** PopDiv custom styles (start) ****/
.popdiv{
    background: none;
    padding: 0px;
}

.popdiv .header-container,
.popdiv .e,
.popdiv .footer-container{
    padding: 0 10px;
}
.popdiv .content-container{
    background-color: #F6F6F6;
    height: 100%;
}
.popdiv .header{
    color:#FFFFFF;
    font-size:16px;
    font-weight:bold;
    height:40px;
    line-height:40px;
    overflow:hidden;
    padding-left:10px;
    padding-right:20px;
    padding-top:5px;
}

.popdiv .footer{
    font-size: 0;
    height: 10px;
}
.popdiv .n{
    background: transparent url(/fotoweb/rsrc/popdiv_tc.png) repeat-x left top;
}
.popdiv .nw{
    background: transparent url(/fotoweb/rsrc/popdiv_tl.png) no-repeat left top;
}
.popdiv .ne{
    background: transparent url(/fotoweb/rsrc/popdiv_tr.png) no-repeat right top;
}
.popdiv .e{
    background: transparent url(/fotoweb/rsrc/popdiv_mr.png) repeat-y right top;
}
.popdiv .se{
    background: transparent url(/fotoweb/rsrc/popdiv_br.png) no-repeat right top;
}
.popdiv .s{
    background: transparent url(/fotoweb/rsrc/popdiv_bc.png) repeat-x left bottom;
}
.popdiv .sw{
    background: transparent url(/fotoweb/rsrc/popdiv_bl.png) no-repeat left top;
}
.popdiv .w{
    background: transparent url(/fotoweb/rsrc/popdiv_ml.png) repeat-y left top;
}

.popdiv .close{
    background:transparent url(/fotoweb/rsrc/popdiv_close.png) no-repeat scroll left top;
    border:medium none;
    height:19px;
    right:4px;
    top:4px;
    width:19px;
    padding: 0;
    text-indent: -9999px;
}


.popdiv.CMSExport .header{
    color:#FFFFFF;
    font-size:16px;
    font-weight:bold;
    height:5px;
    line-height:5px;
    overflow:hidden;
    padding-left:10px;
    padding-right:20px;
    padding-top:5px;
}

.popdiv.CMSExport .n{
    background: transparent url(/fotoweb/rsrc/popdiv_cms_tc.png) repeat-x left top;
}
.popdiv.CMSExport .nw{
    background: transparent url(/fotoweb/rsrc/popdiv_cms_tl.png) no-repeat left top;
}
.popdiv.CMSExport .ne{
    background: transparent url(/fotoweb/rsrc/popdiv_cms_tr.png) no-repeat right top;
}

.popdiv.CMSExport .close{
    display:none;
}

/**** PopDiv custom styles (end) ****/

.loadingIndicator {
    display: none;
    height:19px;
    left:50%;
    margin-left:-75px;
    position:absolute;
    text-align:center;
    top: 24px;
    width:150px;
}
.loadingIndicator .background{
    background:black none repeat scroll 0 0;
    height:100%;
    position:absolute;
    width:100%;
    top: 0px;
    left: 0px;
}
.loadingIndicator span{
    color: #FFFFFF;
    position:absolute;
    text-transform:uppercase;
    top:2px;
    left:0px;
    width:100%;
}
.SubFolderSelection
{
    text-decoration: none;
    background-color: #6600a1;
    color: #F1F1F1;
}

.ClearSearchButton
{
    border:0px;
    display:none;
    cursor:pointer;
    vertical-align:middle;
}

.ClearSearchButtonContainer
{
    position:absolute;
    left:170px;
}


/* Elements for the fwdt install page */

#dnsChk
{
    margin-top: 50px;
}

#manualInstall h2
{
    margin-top: 25px;
}

#fwdtUploadLink
{
    margin-top: 25px;
    text-align: center;
}


/* Infinite Scroll Styling */


.page-grid #TopLine, 
.page-viewalbum #TopLine, 
.page-upload #TopLine
{
    position: fixed;
    width : auto;
    left: 0;
    right: 0;
    min-width: 1255px;
}

.page-grid #NPWrapper, 
.page-viewalbum #NPWrapper,
.page-upload #NPWrapper
{
    height: 98%;
    width: 110%;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    -webkit-transform: translateZ(0px);
}

.page-grid #NavigationPaneControl, 
.page-viewalbum #NavigationPaneControl, 
.page-upload #NavigationPaneControl
{
    position: absolute;
    top: 114px;
}


.page-grid .TopRow, 
.page-viewalbum .TopRow,
.page-upload .TopRow
{
    background-color: #F4F4F4;
    padding-top: 20px;
    position : fixed;
    top : 95px;
    right: 5px;
    left: 250px;
}

.page-viewalbum .TopRowSub
{
    margin-top: 26px;
}
.albumInvitation .TopRowSub
{
    margin-top : 16px;
}

.page-viewalbum .rightOf,
.page-upload .rightOf
{
    min-height: 400px;
    position: static;
    padding-left: 7px;
    margin-bottom: 10px;
    width: auto;
    overflow: visible;
    margin-left: 233px;
}

.page-viewalbum .rightOf
{
    padding-top: 133px;
}

.page-upload .rightOf
{
    padding-top: 156px;
}


.fwLoader
{
    background-image: url(/fotoweb/rsrc/FOTOWARE_loader.gif);
    margin: 0 auto;
    width: 130px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
}

.CMSExportDialogMini
{
    top: 116px !important;
}

.page-viewalbum .rightOf>h3
{
    margin-top: 28px;
}
.SearchHitsInfoBox{
    margin-top: 162px;
}


.PreviewSizePopUp
{
    position: fixed !important;
    top: 120px !important;
}


#downloadDialog ,
#downloadSuccessDialog,
#downloadErrorDialog
{
    text-align: center;
}

#downloadDialog .loaderImage
{
    margin: 30px 0 10px;
}


#downloadDialog .processingText
{
    font-size: 14px;
}


#downloadDialog .extraInfo,
#downloadSuccessDialog .extraInfo,
#downloadErrorDialog .extraInfo
{
    background-color: #FEFFD8;
    padding: 10px 10px 10px 50px;
    background-image: url('/fotoweb/rsrc/icon_information.png');
    background-repeat: no-repeat;
    background-position: 10px 10px;
}

#downloadSuccessDialog .extraInfo,
#downloadErrorDialog .extraInfo
{
    background-color: #FFFFFF;
}

#downloadDialog .extraInfo p,
#downloadSuccessDialog .extraInfo p,
#downloadErrorDialog .extraInfo p
{
    margin: 0;
    text-align: left;
}

#downloadSuccessDialog .extraInfo p.bottomSpacing,
#downloadErrorDialog .extraInfo p.bottomSpacing
{
    margin-bottom: 14px;
}


#downloadSuccessDialog a.blueLinkText
{
    color: #1ea7d8;
}

#downloadDialog .button,
#downloadErrorDialog .button
{
    color: white;
    margin: 10px 0 1px -50px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    background: #1ea7d8; /* Old browsers */
    background: -moz-linear-gradient(top,  #1ea7d8 0%, #1a8ab3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1ea7d8), color-stop(100%,#1a8ab3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1ea7d8 0%,#1a8ab3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1ea7d8 0%,#1a8ab3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1ea7d8 0%,#1a8ab3 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1ea7d8 0%,#1a8ab3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ea7d8', endColorstr='#1a8ab3',GradientType=0 ); /* IE6-9 */

}

#downloadSuccessDialog .button
{
    border: 1px solid #bbb;
    background-color: #e6e6e6;
    margin: 10px 0 1px -50px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}

#downloadSuccessDialog .button:hover
{
    background-color: #d6d6d6;
    border: 1px solid #999;
}


.selectionPopup .ui-dialog-content
{
    /*padding: 0 !important;*/
}

body.selection
{
    background-color: #FFFFFF;
}

.btnClearSelection
{
    text-decoration: underline;
    position: absolute;
    display: inline-block;
    cursor: pointer;
    top: 6px;
    right: 45px;
}

.selectionLoaderWrapper
{
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 100%;
}


.selectionLoaderWrapper .loaderBackground
{
    position: fixed;
    background-color: black;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    filter: Alpha(Opacity=40);
}


.selectionLoaderWrapper .selectionLoader
{
    height: 100%;
}


.z-index-override
{
    z-index: auto !important;
}