Show Menu
TOPICS×

Email share

Email share tool consists of a button added to the Social share panel and the modal dialog box which displays when the tool is activated. The position of the button is fully managed by the Social share tool.
The appearance of the email share button is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emailshare

CSS properties of the email share tool
width
Width of the button.
height
Height of the button.
background-image
The image that is displayed for a given button state.
background-position
Position inside artwork sprite, if CSS sprites are used.
See also CSS Sprites .
This button supports the state attribute selector, which can be used to apply different skins to different button states.
It is possible to remove the button from the Social share panel by setting display:none CSS property on its CSS class.
The button tool tip can be localized. See Localization of user interface elements for more information.
Example - to set up a email share button that is 28 x 28 pixels, and that displays a different image for each of the four different button states.
.s7ecatalogviewer .s7emailshare { 
 width:28px; 
 height:28px; 
} 
.s7ecatalogviewer .s7emailshare[state='up'] { 
background-image:url(images/v2/EmailShare_dark_up.png); 
} 
.s7ecatalogviewer .s7emailshare[state='over'] { 
background-image:url(images/v2/EmailShare_dark_over.png); 
} 
.s7ecatalogviewer .s7emailshare[state='down'] { 
background-image:url(images/v2/EmailShare_dark_down.png); 
} 
.s7ecatalogviewer .s7emailshare[state='disabled'] { 
background-image:url(images/v2/EmailShare_dark_disabled.png); 
}

The background overlay which covers web page when the dialog is active is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7backoverlay

CSS properties of the back overlay
opacity
Background overlay opacity.
background-color
Background overlay color.
Example - to set up background overlay to be gray with 70% opacity:
.s7ecatalogviewer .s7emaildialog .s7backoverlay { 
 opacity:0.7; 
 background-color:#222222; 
}

By default the modal dialog is displayed centered in the screen on desktop systems and takes the whole web page area on touch devices. In all cases, the positioning and sizing of the dialog box is managed by the component. The dialog is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialog

CSS properties of the dialog box
border-radius
Dialog box border radius (in case the dialog box does not take the entire browser window);
background-color
Dialog box background color;
width
Should be either unset, or set to 100%, in which case the dialog takes the whole browser window (this mode is preferred on touch devices);
height
Should be either unset, or set to 100%, in which case the dialog takes the whole browser window (this mode is preferred on touch devices).
Example - to set up dialog to use the entire browser window and have a white background on touch devices:
.s7ecatalogviewer .s7touchinput .s7emaildialog .s7dialog { 
 width:100%; 
 height:100%; 
background-color: #ffffff; 
}

The dialog box header consists of an icon, a title text and a close button. The header container is controlled with the following CSS class selector
.s7ecatalogviewer .s7emaildialog .s7dialogheader

CSS properties of the dialog box header
padding
Inner padding for header content.
The icon and the title text are wrapped into an additional container controlled with
.s7ecatalogviewer .s7emaildialog .s7dialogheader .s7dialogline

CSS properties of the dialog line
padding
Inner padding for the header icon and title.
Header icon is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogheadericon

CSS properties of the dialog box header icon
width
Icon width.
height
Icon height.
background-image
Icon image.
background-position
Position inside artwork sprite, if CSS sprites are used.
See also CSS Sprites .
Header title is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogheadertext

CSS properties of the dialog box header text
font-weight
Font weight.
font-size
Font height.
font-family
Font family.
padding
Internal text padding.
Close button is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7closebutton

**CSS properties of the close button **
top
Vertical button position relative to header container.
right
Horizontal button position relative to header container.
width
Button width.
height
Button height.
padding
Inner padding of button.
background-image
Button image for each state.
background-position
Position inside artwork sprite, if CSS sprites are used.
See also CSS Sprites .
This button supports the state attribute selector, which can be used to apply different skins to different button states.
The Close button tool tip and the dialog box title can be localized. See Localization of user interface elements for more information.
Example - to set up dialog header with padding, 24 x 17 pixels icon, bold 16 point title, and a 28 x 28 pixel Close button positioned two pixels from the top and two pixels from the right of dialog box container:
.s7ecatalogviewer .s7emaildialog .s7dialogheader { 
 padding: 10px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogheader .s7dialogline { 
 padding: 10px 10px 2px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogheadericon { 
    background-image: url("images/sdk/dlgemail_cap.png"); 
    height: 17px; 
    width: 24px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogheadertext { 
    font-size: 16pt; 
    font-weight: bold; 
    padding-left: 16px; 
} 
.s7ecatalogviewer .s7emaildialog .s7closebutton { 
 top:2px; 
 right:2px; 
 padding:8px; 
 width:28px; 
 height:28px; 
} 
.s7ecatalogviewer .s7emaildialog .s7closebutton[state='up'] { 
 background-image:url(images/sdk/close_up.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7closebutton[state='over'] { 
 background-image:url(images/sdk/close_over.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7closebutton[state='down'] { 
 background-image:url(images/sdk/close_down.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7closebutton[state='disabled'] { 
 background-image:url(images/sdk/close_disabled.png); 
}

Dialog footer consists of Cancel and Send email buttons. The footer container is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogfooter

**CSS properties of the dialog box footer **
border
Border that you can use to visually separate the footer from the rest of the dialog box.
The footer has an inner container which keeps both buttons. It is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogbuttoncontainer

CSS properties of the dialog box button container
padding
Inner padding between the footer and the buttons.
Cancel button is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton

CSS properties of the dialog box cancel button
width
Button width.
height
Button height.
color
Button text color for each state.
background-color
Button background color for each state.
This button supports the state attribute selector, which can be used to apply different skins to different button states.
Send email button is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton

CSS properties of the dialog box action button
width
Button width.
height
Button height.
color
Button text color for each state.
background-color
Button background color for each state.
This button supports the state attribute selector, which can be used to apply different skins to different button states.
In addition, both buttons share the same common CSS class which can contain CSS settings that are the same for other dialog box buttons:
.s7ecatalogviewer .s7emaildialog .s7dialogfooter .s7button

CSS properties of the button
font-weight
Button font weight.
font-size
Button font size.
font-family
Button font family.
line-height
Text height inside the button. Affects vertical alignment.
box-shadow
Drop shadow.
margin-right
Right button margin.
This buttons tool tips can be localized. See Localization of user interface elements for more information.
Example - to set up a dialog box footer with 64 x 34 Cancel button and a 82 x 34 send email button, with the text color and background color different for each button state:
.s7ecatalogviewer .s7emaildialog .s7dialogfooter { 
    border-top: 1px solid #909090; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogbuttoncontainer { 
    padding-bottom: 6px; 
    padding-top: 10px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogfooter .s7button { 
    box-shadow: 1px 1px 1px #999999; 
    color: #FFFFFF; 
    font-size: 9pt; 
    font-weight: bold; 
    line-height: 34px; 
    margin-right: 10px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton { 
 width:64px; 
 height:34px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton[state='up'] { 
 background-color:#666666; 
 color:#dddddd; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton[state='down'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton[state='over'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton { 
 width:82px; 
 height:34px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton[state='up'] { 
 background-color:#333333; 
 color:#dddddd; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton[state='down'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton[state='over'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
}

The main dialog area (between the header and the footer) contains scrollable dialog content and scroll panel on the right. In all cases, the component manages the width of this area, it is not possible to set it in CSS. Main dialog area is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogviewarea

**CSS properties of the dialog box viewing area **
height
The height of the main dialog box area. It should be specified only when the dialog box works in desktop mode. It is not applicable when the dialog box is sized to occupy the entire browser window.
background-color
The background color of the main dialog box area.
margin
Outer margin.
The main dialog box area supports the optional state attribute selector. It is set to sendsuccess when the email form is submitted and the dialog box shows a confirmation message. As long as the confirmation message is small, this attribute selector can be used to reduce the dialog box height when such confirmation message is displayed.
Example - to set up the main dialog box area to be 300 pixels height initially and 100 pixels height when the confirmation message is shown, have a ten pixel margin, and use a white background:
.s7ecatalogviewer .s7emaildialog .s7dialogviewarea { 
 background-color:#ffffff; 
 margin:10px; 
 height:300px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] { 
 height:100px; 
}

All form content (like labels and input fields) resides inside a container controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogbody

If the height of this container appears to be bigger than the main dialog box area, a vertical scroll is enabled automatically by the component.
**CSS properties of the dialog box body **
padding
Inner padding.
Example - to set up form content to have ten pixel padding:
.s7ecatalogviewer .s7emaildialog .s7dialogbody { 
    padding: 10px; 
}

Dialog box form is filled on line-by-line basis, where each line carries a part of the form content (like a label and a text input field). Single form line is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogline

CSS properties of the dialog box line
padding
Inner line padding.
Example - to set up a dialog box form to have ten pixel padding for each line:
.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogline { 
    padding: 10px; 
}

All static labels in the dialog box form are controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialoglabel

This class is not suitable for controlling labels size or position because you can apply it to texts in various places of the form user interface.
**CSS properties of the dialog box label. **
font-weight
Label font weight.
font-size
Label font size.
font-family
Label font family.
color
Label text color.
Dialog box labels can be localized. See Localization of user interface elements for more information.
Example - to set up all labels to be gray, bold, with a nine pixel font:
.s7ecatalogviewer .s7emaildialog .s7dialoglabel { 
    color: #666666; 
    font-size: 9pt; 
    font-weight: bold; 
}

All static labels that are displayed to the left of the form input fields are controlled with:
.s7ecatalogviewer .s7emaildialog .s7dialoginputlabel

CSS properties of the dialog box input label
width
The width of the static label.
text-align
The horizontal text alignment.
margin
Static label margin.
padding
Static label padding.
Example - to set up input field labels to be 50 pixels width, right-aligned, have ten pixels of padding, and a ten pixel margin on the right:
.s7ecatalogviewer .s7emaildialog .s7dialoginputlabel { 
    margin-right: 10px; 
    padding: 10px; 
    text-align: right; 
    width: 50px; 
}

Each form input field is wrapped into the container which lets you apply a custom border around the input field. It is controlled with the following CSS class selector::
.s7ecatalogviewer .s7emaildialog .s7dialoginputcontainer

CSS properties of the dialog box input container
border
Border around the input field container.
padding
Inner padding.
Input field container supports optional state attribute selector. It is set to verifyerror when the user makes a mistake in input data format and inline validation fails. This attribute selector can be used to highlight incorrect user input in the form.
Most input fields that spread from the label on the left up to the right edge of the dialog box body (which includes From field and Message field) are controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialoginputwide

CSS properties of the dialog box input wide field
width
Input field width.
The To field is narrower because it allocates space for the Remove email button on the right. It is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialoginputshort

CSS properties of the dialog box input short field
width
Input field width.
Example - to set up a form to have a one pixel grey border with nine pixels of padding around all input fields; to have the same border in red color for fields which fail validation, to have 250 pixels wide To field, and the rest of the input fields 300 pixels wide:
.s7ecatalogviewer .s7emaildialog .s7dialoginputcontainer { 
    border: 1px solid #CCCCCC; 
    padding: 9px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] { 
    border: 1px solid #FF0000; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialoginputshort { 
    width: 250px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialoginputwide { 
    width: 300px; 
}

Email message input field is additionally controlled with:
.s7ecatalogviewer .s7emaildialog .s7dialogmessage

This class lets you set specific properties for the underlying TEXTAREA element.
CSS properties of the dialog box message
height
Message height.
word-wrap
Word wrapping style.
Example - to set up an email message to be 50 pixels high and use break-word word wrapping:
.s7ecatalogviewer .s7emaildialog .s7dialogmessage { 
    height: 50px; 
    word-wrap: break-word; 
}

Add Another Email Address button lets a user add more than one addressee in email form. It is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton

CSS properties of the dialog box add email address button
height
Button height.
color
Button text color for each state.
background-image
Button image for each state.
background-position
Button image position inside the button area.
font-weight
Button font weight.
font-size
Button font size.
font-family
Button font family.
line-height
Text height inside the button. Affects the vertical alignment.
text-align
Horizontal text alignment.
padding
Inner padding.
This button supports the state attribute selector, which can be used to apply different skins to different button states.
The button tool tip can be localized. See Localization of user interface elements for more information.
Example - to set up "Add Another Email Address" button to be 25 pixels high, use 12 point bold font with right alignment, and a different text color and image for each state:
.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton { 
 text-align:right; 
 font-size:12pt; 
 font-weight:bold; 
 background-position:left center; 
 line-height:25px; 
 padding-left:30px; 
 height:25px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] { 
 color:#666666; 
 background-image:url(images/sdk/dlgaddplus_up.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] { 
 color:#000000; 
 background-image:url(images/sdk/dlgaddplus_over.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] { 
 color:#000000; 
 text-decoration:underline; 
 background-image:url(images/sdk/dlgaddplus_over.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] { 
 color:#666666; 
 background-image:url(images/sdk/dlgaddplus_up.png); 
}

Remove button lets a user remove extra addressees from the email form. It is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton

CSS properties of the dialog box remove email button
width
Button width.
height
Button height.
background-image
Button image for each state.
background-position
Position inside artwork sprite, if CSS sprites are used.
See also CSS Sprites .
This button supports the state attribute selector, which can be used to apply different skins to different button states.
The button tool tip can be localized. See Localization of user interface elements for more information.
Example - to set up a Remove button to be 25 x 25 pixels and use a different image for each state:
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton { 
 width:25px; 
 height:25px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] { 
 background-image:url(images/sdk/dlgremove_up.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] { 
 background-image:url(images/sdk/dlgremove_up.png); 
}

The content being shared is displayed in the bottom of the dialog box body and includes a thumbnail, title, origin URL, and description. It is wrapped into a container that is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogcontent

**CSS properties of the dialog box content **
border
Container border.
padding
Inner padding.
Example - to set up a bottom container to have a one pixel dotted border and no padding:
.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogcontent { 
    border: 1px dotted #A0A0A0; 
    padding: 0; 
}

Thumbnail image is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogthumbnail

The background-image property is set by the component logic.
CSS properties of the dialog box thumbnail image
width
Thumbnail width.
height
Thumbnail height.
vertical-align
Vertical alignment thumbnail.
padding
Inner padding.
Example - to set up thumbnail to be 90 x 60 pixels, and top-aligned with ten pixels of padding:
.s7ecatalogviewer .s7emaildialog .s7dialogthumbnail { 
    height: 60px; 
    padding: 10px; 
    vertical-align: top; 
    width: 90px; 
}

Content title, origin, and description are further grouped into a panel to the right of the content thumbnail. It is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialoginfopanel

CSS properties of the dialog box information panel
width
Panel width.
Example - to set up a content information panel to be 300 pixels wide:
.s7ecatalogviewer .s7emaildialog .s7dialoginfopanel { 
    width: 300px; 
}

Content title is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogtitle

CSS properties of the dialog box title
margin
Outer margin.
font-weight
Font weight.
font-size
Font size.
font-family
Font family.
Example - to set up a content title to use bold font and have a ten pixel margin:
.s7ecatalogviewer .s7emaildialog .s7dialogtitle { 
    font-weight: bold; 
    margin: 10px; 
}

Content origin is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogorigin

**CSS properties of the dialog box content origin **
margin
Outer margin.
font-weight
Font weight.
font-size
Font size.
font-family
Font family.
Example - to set up content origin to have a ten pixel margin:
.s7ecatalogviewer .s7emaildialog .s7dialogorigin { 
    margin: 10px; 
}

Content description is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogdescription

CSS properties of the dialog box content description
margin
Outer margin.
font-weight
Font weight.
font-size
Font size.
font-family
Font family.
Example - to set up a content description to have a ten pixel margin and use a nine point font:
.s7ecatalogviewer .s7emaildialog .s7dialogdescription { 
    font-size: 9pt; 
    margin: 10px; 
}

When a user enters incorrect input data and inline validation fails, or when the dialog box needs to render an error or a confirmation message when the form is submitted, a message is displayed in the top of the dialog box body. It is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage

CSS properties of the dialog box error message
background-image
Error icon. Default is an exclamation mark.
background-position
Error icon position inside the message area.
color
Message text color.
font-weight
Font weight.
font-size
Font size.
font-family
Font family.
line-height
Text height inside the message. Affects vertical alignment.
padding
Inner padding.
This message supports the state attribute selector with the following possible values: verifyerror , senderror , and sendsuccess . verifyerror is set when a message is displayed due to an inline input validation failure; senderror is set when a backend email service reports an error; sendsuccess is set when email is sent successfully. This way it is possible to style the message differently depending on the dialog box state.
The button tool tip can be localized. See Localization of user interface elements for more information.
Example - to set up a message to use a ten point bold font, have 25 pixels line height, 20 pixels padding on the left, use an exclamation mark icon, red text in case of an error, and no icon and green text in case of success:
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] { 
    background-image: none; 
    color: #00B200; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage { 
    background-position: left center; 
    font-size: 10pt; 
    font-weight: bold; 
    line-height: 25px; 
    padding-left: 20px; 
}

If vertical scrolling is needed, the scroll bar is rendered in the panel near the right edge of the dialog, which is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7dialogscrollpanel

CSS properties of the dialog box scroll panel
width
Scroll panel width.
Example - to set up a scroll panel to be 44 pixels wide:
.s7ecatalogviewer .s7emaildialog .s7dialogscrollpanel { 
    width: 44px; 
}

The appearance of the scroll bar area is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7scrollbar

CSS properties of the scroll bar
width
The scroll bar width.
top
The vertical scroll bar offset from the top of the scroll panel.
bottom
The vertical scroll bar offset from the bottom of the scroll panel.
right
The horizontal scroll bar offset from the right edge of the scroll panel.
Example - to set up a scroll bar that is 28 pixels wide, an eight pixel margin from the top, right, and bottom of the scroll panel:
.s7ecatalogviewer .s7emaildialog .s7scrollbar { 
    bottom: 8px; 
    right: 8px; 
    top: 8px; 
    width: 28px; 
}

Scroll bar track is the area between the top and bottom scroll buttons. The component automatically sets the position and height of the track. The track is controlled with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolltrack

CSS properties of the scroll track
width
The track width.
background-color
The track background color.
Example - to set up a scroll bar track that is 28 pixels wide and has a gray background:
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolltrack { 
width:28px; 
background-color: #B2B2B2; 
}

Scroll bar thumb moves vertically within a scroll track area. Its vertical position is fully controlled by the component logic, however the thumb height does not dynamically change depending on the amount of content. You can configure the thumb height and other aspects with the following CSS class selector:
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb

CSS properties of the scroll bar thumb
width
The thumb width.
height
The thumb height.
padding-top
The vertical padding between the top of the track.
padding-bottom
The vertical padding between the bottom of the track.
background-image
The image that is displayed for a given thumb state.
background-position
Position inside artwork sprite, if CSS sprites are used.
See also CSS Sprites .
Thumb supports the state attribute selector, which can be used to apply different skins to different thumb states: up , down , over , and disabled .
Example - to set up scroll bar thumb that is 28 x 45 pixels, has a ten pixel margin on the top and the bottom, and has different artwork for each state:
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb { 
    height: 45px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    width: 28px; 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] { 
 background-image:url("images/sdk/scrollbar_thumb_up.png"); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] { 
 background-image:url("images/sdk/scrollbar_thumb_down.png"); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] { 
 background-image:url("images/sdk/scrollbar_thumb_over.png"); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] { 
 background-image:url("images/sdk/scrollbar_thumb_disabled.png"); 
}

The appearance of the top and bottom scroll buttons is controlled with the following CSS class selectors:
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

It is not possible to position scroll buttons using CSS top , left , bottom , and right properties. Instead, the viewer logic automatically positions them.
CSS properties of the top and bottom scroll buttons
width
The button width.
height
The button height.
background-image
The image that is displayed for a given button state.
background-position
Position inside artwork sprite, if CSS sprites are used.
See also CSS Sprites .
These buttons support the state attribute selector, which can be used to apply different skins to different button states: up , down , over , and disabled .
The button tool tip can be localized. See Localization of user interface elements for more information.
Example - to set up scroll buttons that are 28 x 32 pixels and have different artwork for each state:
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] { 
background-image:url(images/sdk/scroll_up_up.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/sdk/scroll_up_over.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/sdk/scroll_up_down.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_up_disabled.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/sdk/scroll_down_up.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/sdk/scroll_down_over.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/sdk/scroll_down_down.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_down_disabled.png); 
}