/******************************************************************************
 * General rules
 */
 
body
{
  background-color:    #A3A3A3;
    
     
        background-repeat:   repeat-x;
      background-position: top;
      background-image:    url(themefiles/b/b05a023656f3f392117c1b1a13210c72/ecom_bg_body.png);
        
  font-family:         Arial, Helvetica, Sans-Serif;
  font-size:           0.75em;
  color:               #404040;
  line-height:         150%;
  padding:             0px;
  margin:              0px;
}

input, select
{
  font-family: Arial;
}

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

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

.imsbutton
{
  background-image:  url(images/ecom_btn_bg.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;
}

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

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

.highlight
{
    color: #C03000;
}

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

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

.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: #E0E0E0;    
}

#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 #C03000;
}

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

#header
{
    width:         100%;
    margin-top:    0px;
  margin-bottom: 10px;
  border-bottom: 1px solid #404040;
}
    
#header td
{
    width: 33%;
}

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

#header_links
{
  padding-right:    13px;
  padding-top:      5px;
  padding-bottom:   5px;
  text-align:       right;
  background-color: #E0E0E0;
  border-top:       1px dotted #404040;
}

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

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

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

#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.05em;
}

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

#sidenav a
{
  /* Total width 188px */
  width:            170px;  
  padding-left:     18px;   
  background-color: #98B7C4;
  border-top:       2px solid white;
  margin:           0px;  
  color:            #404040;
  padding-top:      0.8em;
  padding-bottom:   0.8em;
  display:          block;
  text-decoration:  none; 
}

#sidenav a:hover
{
  background-color: #000000;
  color:            #FFFFFF;
}

/******************************************************************************
 * 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: #98B7C4;
    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: #FFFFFF !important;
}

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

.treeinfotext
{
    background-color: #C03000;
    color:            #FFFFFF;
    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: #FFFFFF;
  border:           1px solid #404040 !important; 
}

#sidenav .lightboxpanel .lightboxtitle
{
  /* Total width: 188px */
  width:               170px;
  padding-left:        18px;  
  padding-top:         0.8em;
  padding-bottom:      0.8em;
  margin:              0px;
  background-color:    #C03000;
  color:               #FFFFFF;
  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 #FFFFFF;
  padding-top:      3px;
  padding-bottom:   3px;  
  color:            #404040;
  display:          block;
  background-color: #98B7C4;  
}

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

#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: #FFFFFF;
  padding:          0px;  
  padding-right:    5px;
}

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

#content
{
  background-color: #FFFFFF;
  padding:          10px; 
    border:           1px solid #404040 !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: 10px;
}

#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;
}

/******************************************************************************
 * 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;
  font-weight:   bold;
  border-bottom: 5px solid #FFFFFF !important;
  border-top:    5px solid #FFFFFF !important;    
}
.admintablewide   td.admintablelabelfullwidth,
.admintable       td.admintablelabelfullwidth,
.admintablenarrow td.admintablelabelfullwidth
{
  text-align:    left;
  font-weight:   bold;
  border-bottom: 5px solid #FFFFFF !important;
  border-top:    5px solid #FFFFFF !important;    
}

.admintablewide   td.admintablebuttons,
.admintable       td.admintablebuttons,
.admintablenarrow td.admintablebuttons
{
  text-align: center;
}

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

.admintablewide   td.admintableheader,
.admintablewide   th.admintableheadercell,
.admintable       td.admintableheader, 
.admintable       td.admintableheadercell, 
.admintable       th,
.admintablenarrow td.admintableheader
{
  background-color: #98B7C4;
  font-weight:      bold;
}

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

 /* This defines the "Buy Products" header for viewpicture. */
.adminsubtablewide td.admintableheader
{
    padding-right: 10px;
    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: #FFFFFF;
    color:            #C03000;
    font-weight:      bold;
}

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

/* This class is used as the title of the e-commerce (products and lightboxes) 
 * checkout process. */
.admintablestrong
{
    font-size:     1.4em;
    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 #404040 !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: #FFFFFF;
  border-top:       1px dotted #404040;
  clear:            both;
}

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

#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:  #E0E0E0; 
}

#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: 10px;
}

td.thumbnailimagecontainer
{
    border:           1px solid #000 !important;
    background-color: #FFF;
}

/* 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: block;
    margin: auto;
}

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

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

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

/* tnConfig is the family of divs that provide the "configure thumbnail layout"
 * options and content. */
.tnConfig_CaptionTool
{
    vertical-align:   middle;
    background-color: #E0E0E0 !important;
    height:           2.2em;
    display:          block;
    font-size:        0.9em;
    padding-top:      2px;
    padding-left:     2px;
    padding-right:    2px;        
    color:            #000;
}

.tnConfig_SimpleCaption
{
    height:    2.5em;
    font-size: 0.9em;
    color:     #000;
}

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

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

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

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

.tnConfig_Toolbar
{
    background-color: #E0E0E0;
    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: #98B7C4; 
    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 #E0E0E0 !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%;  
}

#footer ul
{
	float: left;
	display: inline;
}
#footer #logos
{
  float: right;
  display: inline;
  padding: 11px 4px 0 0;
}
  #footer #logos a
  {
    margin-right: 5px;
  }
  #footer #logos a.twitter
  {
    margin-right: 0;
  }
/******************************************************************************* 
 * History Note Classes
 */

#newhistorynote_button
{
   
}

.historynotetitle
{
    background-color: #E0E0E0; 
    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 #A3A3A3;
    background-color: #FFFFFF;
    margin:           auto;  
}

/* 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 #E0E0E0;
    margin-top:        2px;    
    margin-bottom:     2px;    
    padding:           2px;
    font-size:         0.8em;    
    color:             #404040;    
    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. */
    z-index:     1;
    margin-top: 30px;     /* Spacing for image to sit below toolbar. */
}

/* The toolbar holding the prev/pause/play/next buttons and the speed slider. */
.ims_js_widget_SlideShow_toolbar
{
    height:           30px;
    background-color: #98B7C4;
    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:          #404040;
    font-size:      0.8em;  
    text-transform: uppercase;
}

/* The speed slider's track. */
.ims_js_widget_SlideShow_slider_track
{
    background-color:  #E0E0E0;    
    border:            1px solid #A3A3A3;
    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 #E0E0E0;
    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: #E0E0E0;    
    border:           1px solid #A3A3A3;
    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 #E0E0E0;
    /*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. */    
}