/*
These styles suppliment the #content style in style.css. Thank you.
-------------------------------------------------------------*/

.products
{
    margin-right: 200px;
}

.product_view
{
    margin-right: 200px;
}



/*
general content =filter
-------------------------------------------------------------*/
#filter
{
    background: #fff url(/images/filter_bg.gif) repeat-y 0 0;
    margin-top: -20px;
}

#filter form
{
   margin: 0;
   padding: 0;
}


#filter h4
{
    margin: 3px 0 4px 9px;
}

.label_set
{
    float: left;
    display: inline;
    margin: 0 0 0 12px;
    position: relative;
}

.label_set label
{
    font-size: .95em;
    color: #222;
    margin: 0 0 .4em;
    /* IE 6 and below will incorrectly ignore the underscore. No other browser will. */
    _margin: 0 0 .2em;
    padding: 0;
    line-height: 1em;
    display: block;
}

.label_set input
{
    margin: 0 4px 0 0;
    padding: 0;
    /* IE 6 and below will incorrectly ignore the underscore. No other browser will. */
    _margin: -4px 5px -1px -4px;
}

#filter .divider
{
    margin: 4px 0;
}

#filter .divider_strong
{
    margin: 4px 0 4px 9px;
}

input.notes_save
{
    margin-left:  440px;
}

input.textbox
{
    margin-left: 440px;
    padding: .5em 0;
}

img.notes_image
{
    float: left;
    margin: 0 0 10px;
    width: 100px;
    height: 100px;
}

div.notes_image_bg
{
    background: url(/images/thumb_bg.gif) no-repeat top;
    width: 104px;
    height: 105px;
    padding: 2px 0 0 0;
    margin: 0 15px 0 0;
    float: left;
    font-size: .95em;
    font-weight: bold;
    color: #000;
    line-height: 1.2em;
    position: relative; /* this stuffs up ie */
    clear: left;
}

div.notes_image_bg a
{
    border: 2px solid #fff;
    height: 100px;
    display: block;
    margin-bottom: 5px;
}

div.notes_image_bg a:hover
{
    border: 2px solid #666;
}

input.notes_text
{
    font-size: .95em;
    margin: 0;
    padding: 0;
    width: 140px;
}

textarea.notes_textarea
{
    width: 300px;
    height: 75px;
    margin-top: 10px;
    float: left;
}

#filter select
{
    margin: 0 0 0 12px;
    color: #8A0000;
}

#filter .searchbox
{
    margin: 0px 0 3px 12px;
    color: #8A0000;
    padding: 2px 0 0 4px;
}


ul#selections
{
    list-style: none;
    margin: 0 0 0 1px;
    padding: 0 0 1em 12px;
    background-color: #E2E2E2;
    border-top: 10px solid #e2e2e2;
}

#selections li
{
    background: url(/images/aesthetics_folder_icon.gif) no-repeat 0 2px;
    padding: 0 0 0 18px;
    margin: 0 0 .3em;
}

#selections a
{
    text-decoration: none;
    color: #138BC9;
}

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

#rightcol h3#folder_title
{
    color: #F26100;
    font-size: 1.1em;
    margin: .7em 0 .4em 15px;
}

#folder_link
{
    background: url(/images/folder_lg.gif) no-repeat 0 0;
    width: 179px;
    height: 82px;
    display: block;
    text-decoration: none;
}

#folder_link:hover
{
    background: url(/images/folder_lg_on.gif) no-repeat 0 0;
    text-decoration: none;
}

#folder_link strong
{
    display: block;
    float: right;
    width: 88px;
    color: #797979;
    margin: 19px 2px 0 0;
    font-weight: normal;
    line-height: 1.3em;
}

#folder_link span
{
    color: #990000;
    font-size: 1.5em;
    margin: 0 .1em 0 0;
    font-weight: bold;
}

#rightcol h3.replace
{
    margin: 0;
}

.caption
{
    color: #666;
    font-size: .95em;
    margin: 0 0 1em;
}

a.edit
{
    background: transparent url(/cms/images/icons/edit.gif) center left no-repeat;
    padding: 2px 10px 4px 18px;
}


/* list of folders in right col. */

/* List replaced by select box. Keep styles just in case we change back
ul#folder_list
{
    list-style: none;
    margin: 0 0 1em 15px;
    padding: 0;
    font-size: .95em;
}

#folder_list li
{
    background: url(/images/folder_icon.gif) no-repeat 0px 3px;
    line-height: 1.2em;
    padding: 4px 0 0 20px;
    margin: 0 4px .3em 0;
}

#folder_list a
{
    text-decoration: none;
    color: #333;
}

#folder_list a:hover
{
    text-decoration: none;
    color: #F26100;
}

*/
#folder_list
{
    width: 160px;
    margin: 5px 0 6px 12px;
}



/* list of user folders in /folders/  */

ul#list_folders
{
    list-style: none;
    margin: 1.5em 0 1em 0px;
    padding: 0;
    float: left;
}

#list_folders li
{
    margin: 0;
    padding: 0;
    display: inline;
}

#list_folders a
{
    display: block;
    float: left;
    width: 100px;
    color: #333;
    margin: 0 10px 10px 0;
    text-align: center;
    background: url(/images/folder_large.gif) no-repeat 2px 0;
    line-height: 1.2em;
    padding: 80px 0 0 0;
    text-decoration: none;
    height: 130px;
    overflow: hidden;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 50px;  /* this value is hidden from IE5.x */
}

#list_folders a.ae
{
    background: url(/images/ae_folder_large.gif) no-repeat 2px 0;
}

#list_folders a:hover
{
    background: url(/images/folder_large_on.gif) no-repeat 2px 0;
 	 color: #138BC9;
}

#list_folders a.ae:hover
{
    background: url(/images/ae_folder_large_on.gif) no-repeat 2px 0;
    color: #138BC9;
}

#list_folders a span
{
    text-decoration: none;
    font-size: .9em;
    background-color: #eee;
    color: #888;
}

input.folder_name
{
    margin: 0 0 6px 13px;
    padding: 0 0 0 2px;
    width: 150px;
    color: #666;
    position: relative; bottom:6px;
}

input.create
{
    margin: 0 0 16px 13px;
}

img.folder_img
{
    float: left;
    margin-bottom: 10px;
}


.folder_title
{
    margin: 0 0 0 100px;
    padding-top: 15px;
}


.folders
{
    width: 720px;
    margin: 20px 0 0 31px;
}



/* user editable folder description field */
#folder_desc
{
    line-height: 1.2em;
    margin: 10px 270px 5px 0;
    max-width: 500px;
}

.folder_view
{
    background-color: #fff;
    margin-right: 270px;
    /* Holey! don't remove this or IE really spazzes out */
    height: 100%;
    /* ditto */
    position: relative;
    /* bloody IE */
}

/*
Image thumb display
-------------------------------------------------------------*/

.thumbs
{
    float: left;
    margin-bottom: 10px;
}

.thumbs div
{
    background: url(/images/thumb_bg.gif) no-repeat top;
    width: 104px;
    height: 150px;
    padding: 2px 0 0 0;
    margin: 0 16px 0 0;
    float: left;
    font-size: .95em;
    font-weight: bold;
    color: #000;
    line-height: 1.2em;
    position: relative; /* this stuffs up ie */
}

.thumbs div img
{
    width: 100px;
    height: 100px;
}

.thumbs a.star
{
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    display: block;
    border: 0;
}

.thumbs div a
{
    border: 2px solid #fff;
    display: block;
    margin-bottom: 5px;
}

.thumbs img.star_img
{
    width: 22px;
    height: 22px;
    behavior: url("/includes/pngbehavior.htc");
}

.thumbs div a:hover
{
    border: 2px solid #666;
}

.thumbs a.star:hover
{
    border: 0;
}

.thumbs div a.f
{
    border: 2px solid #FFCC00;
}

.thumbs .view
{
    position: absolute;
    top: 84px;
    left: 2px;

    width: 50px;
    height: 20px;
    /*background: url(/images/spacer.gif);*/
    z-index: 20;
    border: 0;
    margin: 0;
}

.thumbs .view:hover
{
    border: 0;
}

.thumbs .add
{
    position: absolute;
    top: 84px;
    left: 2px;
    width: 100px;
    height: 20px;
    background: url(/images/view_add.gif);
    z-index: 10;
    border: 0;
    margin: 0;
    display: none;
}

.thumbs .add:hover
{
    background: url(/images/view_add_on.gif);
    border: 0;
}

.thumbs .add span, .thumbs .view span
{
    position: absolute;
    left: -999em;
}


/*
=detail view
-------------------------------------------------------------*/

#backbox
{
    background: #fff url(/images/detail_vertical.gif) repeat-y right;
    width: 151px;
    padding-bottom: 6px;
    border-top: 13px solid #fff;
    text-align: center;
}

a.back
{
    text-decoration: none;
    color: #138BC9;
    background: url(/images/back_arrow.gif) no-repeat 0 50%;
    padding: 4px 0 0 13px;
    margin: 0 0 0 13px;
    float: left;
    font-size: 1.1em;
    line-height: 1em;
}

a.back:hover
{
    text-decoration: underline;
}


#detail_view_left
{
    background: #eee url(/images/detail_vertical.gif) repeat-y right;
    width: 146px;
    border-left: 5px solid #666;
    color: #3E3E3E;
    text-align: center;
    position: relative;
}

#detail_view_left h4
{
    font-family: 'arial narrow',helvetica,arial,Verdana,sans-serif;

    font-size: 1.2em;
    margin: .8em 0 .2em;
}

.product_shot
{
    padding: 0 0 13px;
    margin: 0 2px 0 0;
    background: #ccc;
    border-bottom: 1px dotted #333;
}

.product_shot img
{
    width: 124px;
    height: 124px;
    border-top: 12px solid #ccc;
}

a.detail_thumb
{
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    background-color: #fff;
    display: block;
    padding: 2px 0;
    margin: 0 auto 10px;
    width: 89px;
}

a.detail_thumb:hover
{
    border-top: 2px solid #666;
    border-bottom: 2px solid #666;
}

.detail_thumb img
{
    width: 89px;
    height: 89px;
}

#view_product_detail
{
    padding: 0 0 1em;
    border-top: 2px solid #999;
    background: #999 url(/images/detail_view_bottom) repeat-x bottom;
}



#view_product_detail .pic
{
    background-color: #2A2A2A;
    border-top: 2px solid #fff;
    margin: 0 0 12px;
    position: relative;
}

#view_product_detail .pic img
{
    /* size varies according to portrait or landscape */
    /*temp */
}

#view_product_detail h3
{
    color: #fff;
    margin: .6em 0 0 16px;
    font-size: 1.1em;
}


#view_product_detail p
{
    margin: 0 1em .5em 16px;
    width: 490px;
}

#view_product_detail a
{
    color: #ccc;
    text-decoration: underline;
}

#view_product_detail a:hover
{
    color: #fff;
    text-decoration: none;
}


a#add_to
{
    background: url(/images/add_to.gif) no-repeat 0 0;
    width: 137px;
    height: 35px;
    position: absolute;
    right: 10px;
    top: -40px;
    display: block;
}

a#add_to_grey
{
    background: url(/images/add_to_grey.gif) no-repeat 0 0;
    width: 137px;
    height: 35px;
    display: block;
    margin: 0 0 0 10px;
}

a#print
{
    background: url(/images/print.gif) no-repeat 0 0;
    width: 70px;
    height: 35px;
    position: absolute;
    right: 150px;
    top: -40px;
    display: block;
}



.select_action
{
    margin: 10px 10px 0;
    border: 1px solid #eee;
    padding: 4px;
}

.select_action select
{
    margin: 3px 0;
    width: 150px;
}

.select_action input.button
{
    position: relative;
    top: 3px;
}

.folder_view input
{
    position: relative;
    bottom: -.2em;
}

/*
=slideshow
-----------------------------------------------------*/

#ss_body
{
    text-align: left;
    position: relative;
}

#ss_left
{
    float: left;
    margin: 80px 10px 0 0;
    width: 94px;
    position: absolute;
    left: 00px;
    top: 0;
}

#ss_right
{
    position: absolute;
    left: 110px;
    top: 0;
}


a.ss_back
{
    border-bottom: 1px solid #138BC9;
    display: block;
    text-decoration: none;
    color: #333;
    background: url(/images/back_arrow.gif) no-repeat 0 50%;
    padding: 4px 0 0 13px;
    text-align: right;
    position: absolute;
    right: 0;
    top: -30px;
}

a.ss_back:hover
{
    text-decoration: none;
    color: #138BC9;
}


#controller
{
    height: 80px;
    background: url(/images/controller.gif) no-repeat left bottom;
    position: relative;
}


#main_image
{

}


a.slide_thumb_prod
{
    border: 2px solid #ccc;
    display: block;
    margin: 5px auto 40px;
    width: 89px;
}

a.slide_thumb_prod:hover, a.slide_thumb_prod.active2
{
    border: 2px solid #F26100;
}

.slide_thumb_prod img
{
    width: 89px;
    height: 89px;
}



a.slide_thumb
{
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    display: block;
    padding: 2px 0;
    margin: 0 1px 10px 1px;
    width: 89px;
}

a.slide_thumb:hover, a.slide_thumb.active
{
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
}

.slide_thumb img
{
    width: 89px;
    height: 89px;
}


#controller h1
{
    color: #666;
    position: absolute;
    left: 310px;
    bottom: 10px;
    font-size: 1.7em;
    margin: 0;
}

#count
{
    position: absolute;
    left: 110px;
    bottom: 0;
    color: #8D0000;
    font-weight: bold;
    font-size: 1.2em;
}


#favourite
{
    display: block;
    position: absolute;
    left: 220px;
    bottom: 5px;
    width: 52px;
    height: 43px;
}

#favourite.on
{
    background: url(/images/favourite_over.jpg) no-repeat 0 0;
}

#rewind
{
    display: block;
    position: absolute;
    left: 9px;
    bottom: 5px;
    width: 25px;
    height: 43px;
}

#rewind:hover
{
    background: url(/images/rewind_over.gif) no-repeat 0 0;
}

#play
{
    display: block;
    position: absolute;
    left: 34px;
    bottom: 5px;
    width: 46px;
    height: 43px;
}

#play:hover
{
    /*background: url(/images/play_over.gif) no-repeat 0 0;*/
}

#play.playing
{
    background: url(/images/pause.gif) no-repeat 0 0;
}


#fastforward
{
    display: block;
    position: absolute;
    left: 80px;
    bottom: 5px;
    width: 25px;
    height: 43px;
}

#fastforward:hover
{
    background: url(/images/fastforward_over.gif) no-repeat 0 0;
}

/*
Listing styles
-------------------------------------------------------------*/

#listing
{
    width: 600px;
    padding: 10px 0;
    border: 1px solid #fff;
    background-color: #eee;
    /* by also floating this element left we force it to wrap the other floated
    elements and the background color follows the content height.
    You wouldn't need to do this if you did not have any bg color or border */
    float: left;
}

#listing dl
{
    background-color: #fff;
    margin: 10px 20px;
    padding: 0 0 .6em;
    width: 560px; /* Required for IE/Mac to constrain width of the float inside the container. = 600px-(2x20px) */
    float: left; /* Must be floated or they won't clear properly */
    display: inline; /* Fixes the IE/win double margin bug */
}

#listing dt
{
    font-family: Helvetica, sans-serif;
    font-size: 1.6em;
    letter-spacing: 1px;
    color: #999;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
    padding: .5em 0;
    float: right;
    width: 425px;
}

#listing dd
{
    margin: 0 0 0 135px; /* Controls text wrap. 0 = full wrap. */
    padding: 0 1em 0 0;
}

#listing dd.image
{
    margin: 0;
}

#listing dd.image img
{
    float: left;
    margin: 0 14px 10px 0;
}

#listing dd.info
{
    margin: 1em 0 0 0;
    color: #666;
    font-size: .9em;
    padding: 0 1em;
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
    clear: left;
}


/*
view list item
---------------------------------------------------------*/

dl#listing_view
{
    width: 600px;
    background: #fff;
    float: left; /* allows bg color to span floated contents */
    margin: 0 0 20px;
    padding: 0;
}

#listing_view dt
{
    font-family: Helvetica, sans-serif;
    font-size: 1.6em;
    letter-spacing: 1px;
    color: #999;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 0 20px;
    padding: .5em 0;
}

#listing_view dd
{
    margin: 0 1em 0 20px;
}

#listing_view dd.image
{
    float: left;
    margin: 0 1em 1em 20px;
}

#listing_view dd.info
{
    margin: 1em 0;
    color: #666;
    font-size: .9em;
    padding: 0 20px;
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
}




dl.product_details
{
    margin: 1em;
}

.product_details dt
{
    font-weight: bold;
    color: #fff;
    float: left;
    width: 11em;
    margin: 0 0 .5em;
    padding: .5em 0 0 0;
    clear: left;
    border-top: 1px solid #A9A9A9;
}

.product_details dd
{
    margin: 0 0 .5em 9em;
    border-top: 1px solid #A9A9A9;
    padding: .5em 0 0 1em;
}


/*
=form_styles */

#form
{
}

#form input.text
{
    width: 300px;
}

#form input.text-error
{
    width: 300px;
}

#form input.email
{
    width: 300px;
}

#form textarea.textarea
{
    width: 300px;
    height: 100px;
}

#form textarea.textarea-content
{
    width: 300px;
}

#form .form-error
{
    background-color: #DD4604;;
    color: #fff;
    padding: 1px;
    font-weight: normal;
}

#form label
{
    line-height: 1.1em;
    font-weight: bold;
}

#form span.label-note {
    font-size: 0.95em;
    font-weight: normal;
    color: #888;
}