/******************************************************************************
 * General rules
 */
 
body
{
	background-color:    #000000;    
	font-family:         Arial, Helvetica, Sans-Serif;
	font-size:           0.8em;
	color:               #E2E2E2;
	line-height:         150%;
	padding:             0px;
	margin:              0px;

		 
		
}



input, select
{
	font-family: Arial;
}

a
{
	color:           #C1C1C1;
	text-decoration: none;
}

a:hover
{
	color:           #E2E2E2;
	text-decoration: underline;	
}

.imsbutton
{
	background-image:  url(images/ecom_bt_body.png);
	background-repeat: repeat-x;
		border:            1px outset #A0A0A0;
	font-family:       Verdana, sans-serif;
	text-transform:    uppercase;
	padding:           2px;
	padding-left:      5px;
	padding-right:     5px;
	font-size:         0.8em;
	margin:            0px;
	cursor:            pointer;
}

.selectboxtext
{
    font-size: 0.9em;
}

img
{
	border:   0px;
	behavior: url(/images/pngie.htc);
}

.expired
{
    color:      #C1C1C1;
    font-style: italic;
}

.highlight
{
    color: #C1C1C1;
}

.cropmessage_highlight
{
    color: #C1C1C1;
    font-weight: bold;
    font-size: 1.2em;
}

.download_highlight
{
    border: 5px solid #C1C1C1;
}

.download_highlight td
{
    padding: 10px !important;
}

/******************************************************************************
 * Viewpicture.tlx rules
 */

 /* navwidgets appear below the image. */
#navwidgets li
{
    display:         inline;
    list-style-type: none;
    margin-left:     3px;
    margin-right:    3px;    
}

#navwidgets
{
    margin:        0px;
    padding:       0px;
    margin-top:    10px;
    margin-bottom: 10px;
}

/* toolcontainer represents the strip of icons next to the image. */
#toolcontainer
{
    background-color: #000000;    
}

#toolcontainer p
{
    display: inline;
}

/******************************************************************************
 * IMS formatting rules.
 * IMS supports a large number of formatting rules that apply a tweak to an
 * element in addition to its core style. A lot of these have been deprecated
 * in the ecommerce template; those that remain are below.
 */
 
.clear
{
    display: none;    
}

.alignCenter
{
	text-align: center !important;
}

.alignRight
{
	text-align: right !important;
}

.formFieldWidth 
{
    width: 300px;
}

.formFieldWidthSmall 
{
    width: 150px;
}

.formFieldWidthVerySmall 
{
    width: 30px;
}

/* This is used on the product checkout for indicating crop on images. */
.productborder
{
    border: 2px solid #C1C1C1;
}

/******************************************************************************
 * Header rules
 */
 
#header_logosearch
{		
	height:           80px;
	background-color: #000000;
	width:            100%;
}

#header
{
    width:         100%;
    margin-top:    10px;
    margin-left:   30px;
    margin-right:  20px;
margin-bottom: 10px;
	border-bottom: 0px solid #E2E2E2;
}
    
#header td
{
    width: 100%;
}

#header img
{
	margin-top:    auto;
	margin-bottom: auto;
	float:         middle;
}

#header_links
{
	padding-right:    50px;
	padding-top:      30px;
	padding-bottom:   5px;
	text-align:       right;
        font-size:          1.5em;
	background-color: #000000;
	border-top:       0px dotted #E2E2E2;
}

#header_links a
{
	padding-left:    0px;
	margin-left:     30px;
	padding-right:   20px;
	border-left:     2px solid #E2E2E2;
	text-align:      left;	
	text-decoration: none;		
}

#header_links a:hover
{
	text-decoration: underline;
}

#search
{	
	text-align:    right;
	float:         right;
	margin-top:    25px;
	padding-right: 0px;
}

#headersearchbox
{    
    padding: 1px;
    width: 200px;
}

/******************************************************************************
 * Page definition rules. table#page defines the left-hand nav/lightbox column
 * and the right-hand page column.
 */

#page
{
	border:   0px;
	width:    95%;
	margin:   auto;    	
}

#page td
{
	border:         0px;
	vertical-align: top;	
}

/******************************************************************************
 * Left navigation rules
 */

 /* Total width of sidenav is 200px = 190px for content and 10px for virtual 
  * margin to content. */
#sidenav
{
	width:   200px;
	padding: 0px;
}

#sidenav .ruler
{	
	height:           10px;
	font-size:        0.10em;
}

#sidenav .menuholder
{
    background-color: #000000;
    /* Total width 190px */
    width:            190px;
    padding:          0px;
    border:           4px solid #000000 !important;
}

#sidenav a
{
	/* Total width 188px */
	width:            130px;	
	padding-left:     18px;		
	background-color: #E2E2E2;
	border-top:       2px solid #000000;
	margin:           0px;	
	color:            #000000;
	padding-top:      0.5em;
	padding-bottom:   0.5em;
	display:          block;
	text-decoration:  none;	
}

#sidenav a:hover
{
	text-decoration: underline;

}

#sidenav div.progresscontainer
{
	/* Total width 188px */
	width:            152px;	
	padding-left:     18px;
	padding-right:    18px;	
	background-color: #E2E2E2;
	border-top:       2px solid #000000;
	margin:           0px;	
	color:            #E2E2E2;
	padding-top:      0.5em;
	padding-bottom:   0.5em;
	display:          block;
	text-decoration:  none;	
}

#sidenav div.progresscontainer a
{
	/* Total width 152px */
	width:            152px;	
	text-decoration:  none;
	padding-left:     0px;		
	border-top:       0px solid #000000;
	padding-top:      0px;
	padding-bottom:   0px;
}

#sidenav .progresssurround
{
	width:              95%;
	height:             10px;
    -moz-border-radius: 4px 4px 4px 4px;
	border:             1px solid gray;
	margin-bottom:      4px;
	margin-top:         1px;
	margin-left:        0px;
	overflow:           hidden;
	background-color:   #000000;
}

#sidenav .progressbar
{
	width:              0px;
	height:             10px;
	font-size:          1px;
}

/******************************************************************************
 * Tree widget rules.
 * Displayed on index.tlx if the user has chosen this mode.
 */

.treewidgetcontainer
{
    width:         100%;
    margin-bottom: 10px;
}

.treewidgettitle
{
    border:           none;
    background-color: #E2E2E2;
    padding:          3px;
    margin-bottom:    10px;
}

.treewidgettitle a
{
    float: right;
}
    
.treewidgetcontainer td
{
    vertical-align: middle !important;
    padding:        3px;
}

.treewidgetcontainer td img
{
    vertical-align: middle;
}

.treewidgetbackground1
{
    background-color: #000000 !important;
}

.treewidgetbackground2
{
    background-color: #000000 !important;
}

.treeinfotext
{
    background-color: #C1C1C1;
    color:            #000000;
    padding:          2px;
}

/******************************************************************************
 * Lightbox rules.
 * The lightbox has a total width of 190px and sits under the left-hand menus.
 * It is populated with content by JavaScript at run time.
 */

#sidenav .lightboxpanel
{
	/* Total width 190px */
	padding:          0px;
	width:            188px;	
	background-color: #000000;
	border:           1px solid #E2E2E2 !important;	
}

#sidenav .lightboxpanel .lightboxtitle
{
	/* Total width: 188px */
	width:               170px;
	padding-left:        18px;	
	padding-top:         0.8em;
	padding-bottom:      0.8em;
	margin:              0px;
	background-color:    #C1C1C1;
	color:               #000000;
	display:             block;
	/* Overrides the border inherited from #sidenav a. */
	border:              0px;	
}

#sidenav .lightboxpanel .lightboxtitle:hover
{
    background-color: #000000;
}

#sidenav .lightboxpanel a
{
	/* Total width 188px */
	width:            180px;
	padding-left:     8px;
	border:           0px;
	border-top:       2px solid #000000;
	padding-top:      3px;
	padding-bottom:   3px;	
	color:            #E2E2E2;
	display:          block;
	background-color: #E2E2E2;	
}

#sidenav .lightboxpanel a:hover
{
	text-decoration:  none;
	background-color: #E2E2E2;
	color:            #000000;
}

#sidenav .lightboxpanel #collectiondiv
{
	margin:      auto;
	line-height: 35px;
	padding:     5px;
}

/* This gets applied to individual images in the lightbox. */
#sidenav .lightboxpanel #collectiondiv a
{
	display:          inline;
	border:           0px;
	background-color: #000000;
	padding:          0px;	
	padding-right:    5px;
}

/******************************************************************************
 * Ecommerce basket rules
 * The basket has a total width of 190px and sits under the left-hand menus.
 */

#sidenav #imsBasket
{
	/* Total width 190px */
	padding:          0px;
	width:            188px;	
	background-color: #000000;
	border:           1px solid #E2E2E2 !important;	
}

#sidenav #imsBasket .imsBasket_Title
{
	/* Total width: 188px */
	width:               170px;
	padding-left:        18px;	
	padding-top:         0.8em;
	padding-bottom:      0.8em;
	margin:              0px;
	background-color:    #C1C1C1;
	color:               #000000;
	display:             block;
	/* Overrides the border inherited from #sidenav a. */
	border:              0px;	
}

#sidenav #imsBasket .imsBasket_Title:hover
{
        text-decoration:  underline;

}

#sidenav #imsBasket .imsBasket_Contents
{
    padding:       5px;
    padding-left:  8px;
    padding-right: 8px;
}

#sidenav #imsBasket .imsBasket_Navigation a
{
	/* Total width 188px */
	width:            180px;
	padding-left:     8px;
	border:           0px;
	border-top:       2px solid #000000;
	padding-top:      3px;
	padding-bottom:   3px;	
	color:            #000000;
	display:          block;
	background-color: #E2E2E2;
	clear: both;	
}

#sidenav #imsBasket .imsBasket_Navigation a:hover
{
	text-decoration:  underline;
	
}

#sidenav #imsBasket #imsBasket_Description table
{
    /* Total width: 172px */
    width:      172px; 
}

#sidenav #imsBasket #imsBasket_Description th
{
    font-weight:   bold;
    text-align:    right;   
}

#sidenav #imsBasket #imsBasket_Description td
{
    background-color: #000000;
    border-top:       2px solid #000000;
    padding-left:     3px !important;    
}

#sidenav #imsBasket #imsBasket_Message
{
    margin-top:       3px;
}

/******************************************************************************
 * Content rules
 */

#content
{
	background-color: #000000;
	padding:          10px;	
    border:           1px solid #E2E2E2 !important;
}

.maindircontainer, .maindircontainercell
{
	width:          100%;
	vertical-align: top;
}

#formcontainer
{
    display: inline;
}

/******************************************************************************
 * Page nav rules, for controls that appear above viewdir/gallery/picture pages.
 */

#pageControls
{	
	float:         left;
	width:         100%;
}

#navigationElements
{
    width:         100%;
	display:       block;
	/* Adds spacing below toolbar for IE. */
	margin-bottom: 10px;	
}

#breadcrumbs
{
	float:         left;
	/* Adds spacing below toolbar for FF, Safari. */
	margin-bottom: 10px;
	width: 50%;
}

.pagination
{
	float:      right;
	text-align: right;
}

.pagination p
{
	text-align: right;
	display:    inline;
	width:      100%;
}

#pageChooser
{
	margin-left:  0px;
	padding-left: 0px;
}

#pageChoose ul
{
    display: inline;
}

#pageChooser li
{
	list-style-type: none;
	display:         inline;
	padding-left:    3px;
	margin-left:     0px;
}

#currentAlbum
{
	margin-top: 8px;
}

#currentAlbum img
{
	margin-right: 10px;
	float:        left;
}

#currentAlbum div a.albumtitle
{
	font-size: 1.4em;
	font-weight: bold;
}

.navigationdescriptionelement
{
    margin-top: 5px;
}

#feed_subscribe_link img
{
	float: none;
}

/* An area used on index.tpl to add some content to the RH side, where 
 * other pages have the navigation controls. EG the user upload button goes
 * here. */
.galleryPageRight
{
    float: right;
}

/******************************************************************************
 * The log-in form table - a special case of the otherwise generic table rules,
 * which follow below.
 */

#logintable
{
    width:  100%;
    border: 1px solid #000000 !important;
}
 
#logintable th
{
    text-align:       left;
    font-weight:      bold;
    background-color: #E2E2E2;
    padding:          5px;
}

#logintable td
{
    padding-left: 10px;
    padding-top:  5px;
}

#logintable td label
{
    font-weight: bold;
}

#logintable td input
{
    width: 150px;
}

#logintable .buttons
{
    padding-top:    5px;
    padding-bottom: 5px;
    line-height:    2.5em;
}

.front_slideshow_wrapper
{
    width:            56%; 
    background-color: #000000;
}

.front_event_wrapper
{
    width:            56%; 
}

.front_loginform_wrapper
{
    width:        43%; 
    padding-left: 10px;    
}

.loginbanner
{
    font-size:      1.4em;
    letter-spacing: 0.05em;
    padding-top:    15px !important;
    padding-bottom: 15px !important;
}

.front_solo_loginform
{
    width:  100%;
    margin: auto;
}

#front_slideshow_message
{
    padding:          5px; 
    text-align:       center; 
    font-weight:      bold; 
    background-color: #E2E2E2;
}

/******************************************************************************
 * Table rules. IMS uses several different types of table. These CSS rules
 * amalgamate all the tables into, wherever possible, a single definition. There
 * are exceptions, which are individually commented upon below.
 */

.admintablewide, 
.admintable,
.admintablenarrow
{
	width:           100%;
	border-collapse: collapse;	
	margin-bottom:   10px; /* Ignored by IE, adds spacing for FF. */
}

.adminsubtablewide
{
	width:           98%;
	border-collapse: collapse;	
	margin-bottom:   10px; /* Ignored by IE, adds spacing for FF. */
}

.admintablewide    td,
.admintablewide    th,
.adminsubtablewide td,
.adminsubtablewide th,
.adminsubtablewide td.admintabletext,
.admintable        td, 
.admintable        th,
.admintablenarrow  td
{
	padding:     5px;
	text-align:  left;
	font-weight: normal;
}

.admintablewide   td.admintablelabel,
.admintable       td.admintablelabel,
.admintablenarrow td.admintablelabel
{
	width:         33%;
	text-align:    right;
	border-bottom: 5px solid #000000 !important;
	border-top:    5px solid #000000 !important;		
}
.admintablewide   td.admintablelabelfullwidth,
.admintable       td.admintablelabelfullwidth,
.admintablenarrow td.admintablelabelfullwidth
{
	text-align:    left;
	border-bottom: 5px solid #000000 !important;
	border-top:    5px solid #000000 !important;		
}

.admintablewide   td.admintablebuttons,
.admintable       td.admintablebuttons,
.admintablenarrow td.admintablebuttons
{
	text-align:   left;
	padding-left: 0px !important;
}

.admintablewide   td.admintableinput,
.admintable       td.admintableinput,
.admintablenarrow td.admintableinput
{
	width:            66%;
	background-color: #000000;
	border-bottom:    5px solid #000000 !important;
	border-top:       5px solid #000000 !important;
}

.admintablewide   td.admintableheader,
.admintablewide   th.admintableheadercell,
.admintable       td.admintableheader, 
.admintable       td.admintableheadercell, 
.admintable       th,
.admintablenarrow td.admintableheader
{
	background-color: #000000;

}

.admintablewide    td.admintableheadercell,
.adminsubtablewide th, 
.adminsubtablewide td.admintableheadercell,
.adminsubtablewide th.admintableheadercell
{
	background-color: #000000;
	font-weight:      normal !important;
}	

 /* This defines the "Buy Products" header for viewpicture. */
.adminsubtablewide td.admintableheader
{
    padding-right: 8px;
    font-size:     1.4em;
    font-weight:   bold;
    line-height:   2em;
    white-space:   nowrap;
}

/* The admintablewrapper can hold "other" content that needs to be in a
 * table. A good example is the history note widget. */
.admintable td.admintablewrapper
{
    padding-left:   10px;
    padding-top:    10px;
    padding-bottom: 0px;
    padding-right:  10px;
}

/* This class is used for form errors. */
td.admintablewarning
{
    background-color: #000000;
    color:            #C1C1C1;
    font-weight:      bold;
}

/* This class is used in the e-commerce (products and lightboxes) process. */
td.admintabletexttotal
{
    border-top: 1px solid #E2E2E2 !important;
}

/* This class is used as the title of the e-commerce (products and lightboxes) 
 * checkout process. */
.admintablestrong
{
    font-size:     1.2em;
    font-weight:   bold;
    line-height:   2em;
    white-space:   nowrap;
}

/* Messages under an admin table lable (eg addhistorynote.tpl) */
.admintablelabelmessage
{
    font-weight: normal;
}

/******************************************************************************
 * Index welcome table rules - this defines the text on the libraryhome.tlx
 * page.
 */
 
table.indexwelcome
{
    width:         80%;
    margin-bottom: 10px;
}

table.indexwelcome td.indexwelcomemessage
{
    padding:          5px;
    text-align:       center;
}

/******************************************************************************
 * General and advanced search rules.
 */
 
#publicgeneralsearch, #generalsearch
{
    border-bottom: 1px dotted #E2E2E2 !important;
    margin-bottom: 10px;
}

/* This wraps the advanced search GUI and hence exposes it to CSS customisation,
 * if required. */
#divADV_SEARCH
{

}

/*******************************************************************************
 * Main area table - used inside the page for organising content, particularly 
 * viewpicture.tlx
 */

#mainareatable
{
    margin-top: 10px;
    width:      100%;
} 

#mainarealeft, #mainarealeftasset
{
    padding-right:  10px;
    vertical-align: top;
    width:          348px;
}

#mainarearight, #mainarearightasset
{
    vertical-align: top;
}

/*******************************************************************************
 * IMS Form rules
 */

#imsform
{
    /* IMS forms come wrapped in a block-level element (TD, DIV) so the form
     * itself creates an extra line break in IE, unless displayed inline. */
    display: inline;
}

#imsform td
{
    /* Align captions, buttons and input/select elements via td cells. */
    vertical-align: middle;
}

/*******************************************************************************
 * Toolbox rules, seen on viewdir.tlx
 */

#toolbox
{    
	background-color: #000000;
	border-top:       0px dotted #E2E2E2;
	clear:            both;
}

#eCommerce h3
{
	display:      inline;
	margin-right: 10px;
	font-size:    2em;
}

#eCommerce
{
    margin-top:     10px;
	padding-top:    5px;
	padding-bottom: 5px;
}

#eCommerce input, #eCommerce select
{
	margin-right: 10px;
}

#tools
{
	margin-top:        10px;
    padding-top:       10px;    
	padding-left:      10px;
	background-color:  #000000;	
}

#tools img
{
    vertical-align: middle;
    margin-right:   3px;
}

#tools p
{
	display:       inline;	
	padding-right: 10px;
	padding-left:  0px;	
}

#tools a, #tools strong
{
    white-space: nowrap;
}

/******************************************************************************
 * Thumbnail rules
 */

.thumbnailWrapper
{    
    width:      100%;    
}
 
.thumbnailFloat
{
	float:        left;
	margin-right: 0px;
}

.thumbnailimagecontainer
{
    border:     1px solid #000000 !important;
}

/* The viewpicture tool icons use these rules, too. This removes the border
 * for these icons. */
#picturepanel .thumbnailimagecontainer
{
    border: none !important;
    padding: 2px;
}

#picturepanel .thumbnailimagecontainer img
{
    display: list;
    margin: auto;
}

.singlethumbnailpanel .thumbnailimagecontainer img
{
    display: block;
    margin: auto;
}

.thumbnailimagecaptionrate
{
    font-size:        0.9em;
    vertical-align:   middle;
    background-color: #C1C1C1 !important;
    color:            #000000;
    height:           2.2em;
    display:          block;
    padding-top:      0px;
    padding-left:     10px;
    padding-right:    10px;
}

/* The clickable folder or thumbnail image. */
.assetAnchor:hover
{
    text-decoration: none;
}

/* listView is the family of classes that control the index page list view layout */
.listView_Details
{
    background-color: #000000 !important;
    font-size:        0.9em;
    padding-top:      0px;
    padding-left:     10px;
    padding-right:    10px;
    vertical-align:   middle !important;
    text-align:       center;
    width:            200px;
    border:           1px solid #000000 !important;
}
.listView_Thumbnail
{
    border:           1px solid #000000 !important;
}
.listView_Description
{
    background-color: #000000 !important;
    font-size:        1.25em;
    padding-top:      0px;
    padding-left:     10px;
    padding-right:    10px;
    padding-bottom:   10px;
    vertical-align:   middle !important;
    text-align:       center;
    border:           1px solid #000000 !important;
}
/* tnConfig is the family of divs that provide the "configure thumbnail layout"
 * options and content. */
.tnConfig_CaptionTool
{
    vertical-align:   middle;
    background-color: #000000 !important;
    font-colour:   ($MainBackground)
    height:           0em;
    display:          block;
    font-size:        1em;
    padding-top:      0px;
    padding-left:     10px;
    padding-right:    10px;  
 }

.tnConfig_SimpleCaption
{
    height:    3em;
    font-size: 0.9em;
}

.tnConfig_ExtendedCaption
{
    height:        2em;
    font-size:     0.9em;
    border-bottom: 1px dotted #000000;
}

.tnConfig_CaptionTool img
{
    margin-right: 3px;   
}

.tnConfig_PadlockImage
{
    position:    absolute;
    z-index:     1;
}

.tnConfig_ExpiredImage
{
    position:         absolute;
    z-index:          1;
    color:            #000000;
    height:           1.5em;
    padding-top:      2px;
    background-color: #C1C1C1;
}

.tnConfig_Toolbar
{
    background-color: #000000;
    padding:          10px;
    clear:            both;
    margin-bottom:    10px;
}

/******************************************************************************* 
 * Used on viewpicture.tlx:
 *   - Metadata Panel Classes
 *   - toolbars
 */

#viewpicturetools_BuyProducts,
#viewpicturetools_BuyDownloads,
#viewpicturetools_RateIt
{
    margin-top: 10px;
}

.viewpicturetools_LicenceSummary
{
    padding-top: 5px;
}

.metapanel
{
    width: 100%;
    margin-right: 10px;
    margin-bottom: 10px;
}

.metapanel .metapanel_Title
{
    background-color: #E2E2E2; 
    padding:          5px;
    font-weight:      bold;
}

.metapanel table
{
    margin:          0px;
    padding:         0px;
    border-collapse: collapse;
    border-spacing:  0px;
    width:           100%;
    border:          0px;
}

.metapanel table tr th
{
    width:          25%;
    text-align:     right;
    font-weight:    bold;
    padding:        2px;
    vertical-align: top;
}

.metapanel table tr td
{
    width:   75%;
    padding: 3px;
}

.viewpicimagecontainer 
{
    border:         1px solid #000000 !important;
    text-align:     center;
    padding:        10px;
    vertical-align: middle !important;
}

.viewpicimagecontainer a img
{
    display: block;
    margin:  auto;
}

/******************************************************************************
 * Footer rules
 */
 
 #footer
{
    margin:     auto;
	margin-top: 10px;
	text-align: right;
	width:      95%;	
}

/******************************************************************************* 
 * History Note Classes
 */

#newhistorynote_button
{
   
}

.historynotetitle
{
    background-color: #000000; 
    padding:          3px; 
    margin-top:       0px;
    margin-bottom:    0px;
} 

.historynotebody
{
    margin-top:    5px;
    margin-bottom: 20px;
}

.historynoteerror
{
    background-image:    url(/images/warning.png);
    background-position: center left;
    background-repeat:   no-repeat;
    padding-left:        30px;
}

/******************************************************************************* 
 * Slide Show Classes
 */

 /* The box holding the slide show. */
.ims_js_widget_SlideShow_container
{
    font-family:      sans-serif;
    width:            598px;
    height:           407px;
    border:           1px solid #000000;
    background-color: #000000;
    margin:           auto;  
}
.ims_js_widget_SlideShow_container_libraryhome
{
    font-family:      sans-serif;
    margin:           auto;  
    border: 0px !important;
    background: none !important;
    height: 350px !important;
    width: 350px !important;
}
/* Generic button, used for "Stop Slide Show". */
.ims_js_widget_SlideShow_generic_button
{
    background-image:  url(/images/ss_btn_bg.png);
    background-repeat: repeat-x;
    border:            1px outset #000000;
    margin-top:        2px;    
    margin-bottom:     2px;    
    padding:           2px;
    font-size:         0.8em;    
    color:             #E2E2E2;    
    font-family:       verdana; 
    text-transform:    uppercase;
}

/* The image in the slideshow. This is used for the invisible buffer and the
 * image on display. Edit the first three rules with care; edit the margin-top
 * to adjust for changes in the toolbar height. */
.ims_js_widget_SlideShow_image
{
    display:    block;
    position:   absolute; /* Ensures buffer sits behind main image. */
    zIndex:     1;
    margin-top: 30px;     /* Spacing for image to sit below toolbar. */
}
.ims_js_widget_SlideShow_image_libraryhome
{
    display:    block;
    position:   absolute; /* Ensures buffer sits behind main image. */
    zIndex:     1;
    margin-top: 0px ! important;
}
/* The toolbar holding the prev/pause/play/next buttons and the speed slider. */
.ims_js_widget_SlideShow_toolbar
{
    height:           30px;
    background-color: #E2E2E2;
    width:            598px;
}

/* A layout div wrapping the prev/pause/play/next buttons. */
.ims_js_widget_SlideShow_toolbar_button_container
{
    float:       left;
    margin-left: 5px;
}

/* Each of the prev/pause/play/next buttons. */
.ims_js_widget_SlideShow_toolbar_button
{
    padding-right: 5px;
    margin-left:   5px;
    margin-top:    6px;
    cursor:        pointer;
    width:         20px;
    height:        20px;
}

/* A layout div wrapping the slower/faster speed slider. */
.ims_js_widget_SlideShow_slider_container
{
    width:      275px;
    float:      right;
    margin-top: 5px;
}

/* The faster/slower text */
.ims_js_widget_SlideShow_slider_container span
{
    padding-top:    3px; 
    font-family:    verdana;
    color:          #E2E2E2;
    font-size:      0.8em;  
    text-transform: uppercase;
}

/* The speed slider's track. */
.ims_js_widget_SlideShow_slider_track
{
    background-color:  #000000;    
    border:            1px solid #000000;
    width:             150px;
    height:            18px;
    float:             left;
    margin-right:      10px;
    margin-left:       10px;
}

/* The speed slider's handle. */
.ims_js_widget_SlideShow_slider_handle
{
    background-image:  url(/images/ss_track_bg.png);
    background-repeat: repeat-x;
    border:            1px outset #000000;
    cursor:            move;
    width:             30px;
    height:            12px;
    margin-top:        2px;    
    margin-bottom:     2px;    
    float:             left;  /* Ensures handle starts in right place in IE. Do not change! */
    font-size:         0.1em; /* Ensures CDATA doesn't enforce a minimum height in IE6. */
}

/* A layout div wrapping the context (position in slide show) slider. */
.ims_js_widget_SlideShow_context_container
{
    width:       580px;
    margin-top:  9px;
    margin-left: 9px;
    height:      20px;
}

/* The context slider's track. */
.ims_js_widget_SlideShow_context_track
{
    background-color: #000000;    
    border:           1px solid #000000;
    width:            574px;
    height:           18px;
    float:            left;     
}

/* The context slider's handle. Do not set a width. */
.ims_js_widget_SlideShow_context_handle
{
    background-image:  url(/images/ss_track_bg.png);
    background-repeat: repeat-x;
    cursor:            move;
    border:            1px outset #000000;
    /*width:           Set by IMS. Do not supply a width here. */
    height:            12px;
    margin-top:        2px;    
    float:             left;  /* Ensures handle starts in right place in IE. Do not change! */
    font-size:         0.1em; /* Ensures CDATA doesn't enforce a minimum height in IE6. '*/    
}


/******************************************************************************* 
 * Keyword auto-completer rules 
 */

.badtokendiv
{
    color: #C1C1C1;
}

.autocomplete
{
    border:           1px solid #E2E2E2;
    background-color: #000000
}
 
.adminoptionslabel
{
	width: 40%;
	vertical-align: top;
	padding-top:2px;
	padding-bottom:2px;
}

.adminoptionslabel2
{
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
	font-variant: normal;
	font-style: normal;
	text-align: right;
	margin-top: 2px;
	margin-bottom: 0px;
	margin-left: 5px;
	margin-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 10px;
	border: #000000 solid;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-width: 2px;
}

.adminoptionsoption
{
	vertical-align: top;
}

.adminoptionsoption2
{
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
	text-align: left;
	margin-top: 2px;
	margin-bottom: 0px;
	margin-left: 5px;
	margin-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right: 10px;
	border: #000000 solid;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
}