Partager intégré embed-share

L’outil de partage d’intégration consiste en un bouton ajouté au panneau de partage Social et à la boîte de dialogue modale qui s’affiche lorsque l’outil est activé. La position du bouton est entièrement gérée par l’outil de partage Social.

L’aspect du bouton de partage intégré est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embedshare

Propriétés CSS de l’outil de partage intégré

Il est possible de supprimer le bouton du panneau de partage Social en définissant display:none la propriété CSS sur sa classe CSS.

L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple : pour configurer un bouton Partager intégré de 28 x 28 pixels qui affiche une image différente pour chacun des quatre états différents du bouton :

.s7ecatalogsearchviewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

Le recouvrement d’arrière-plan qui recouvre la page Web lorsque la boîte de dialogue est active est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay

Propriétés CSS de la superposition d’arrière-plan

Exemple - Pour configurer une superposition d’arrière-plan afin qu’elle soit grise avec un taux d’opacité de 70 % :

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Par défaut, la boîte de dialogue modale s’affiche centrée sur l’écran sur les ordinateurs de bureau et occupe toute la zone de la page Web sur les appareils tactiles. Dans tous les cas, le positionnement et le dimensionnement de la boîte de dialogue sont gérés par le composant. La boîte de dialogue est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialog

Propriétés CSS de la boîte de dialogue

Exemple - pour configurer la boîte de dialogue de manière à utiliser toute la fenêtre du navigateur et à avoir un fond blanc sur les appareils tactiles :

.s7ecatalogsearchviewer .s7touchinput .s7embeddialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

L’en-tête de boîte de dialogue se compose d’une icône, d’un texte de titre et d’un bouton Fermer. Le conteneur d’en-tête est contrôlé par

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader

Propriétés CSS de l’en-tête de boîte de dialogue

L’icône et le texte du titre sont placés dans un conteneur supplémentaire contrôlé par

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline

Propriétés CSS de la boîte de dialogue

L’icône d’en-tête est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon

Propriétés CSS de l’icône d’en-tête de boîte de dialogue

Le titre de l’en-tête est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext

Propriétés CSS du texte d’en-tête de la boîte de dialogue

Le bouton Fermer est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7closebutton

Propriétés CSS du bouton de fermeture ​

L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - Pour configurer un en-tête de boîte de dialogue avec une remplissage, une icône de 24 x 14 pixels et un titre en gras de 16 points. Enfin, un bouton Fermer de 28 x 28 pixels, positionné à deux pixels du haut et à deux pixels de la droite du conteneur de boîtes de dialogue :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgembed_cap.png");
    height: 14px;
    width: 24px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

Le pied de page de la boîte de dialogue est constitué du bouton « Annuler ». Le conteneur de pied de page est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter

Propriétés CSS du pied de page de boîte de dialogue ​

Le pied de page a un conteneur intérieur qui conserve le bouton. Elle est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer

Propriétés CSS du conteneur de boutons de la boîte de dialogue

Le bouton Sélectionner tout est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton

Ce bouton n’est disponible que sur les systèmes de bureau.

Propriétés CSS du bouton Sélectionner tout

Le bouton Annuler est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton

Propriétés CSS du bouton Annuler de la boîte de dialogue

En outre, les deux boutons partagent une classe CSS commune qui peut contenir des paramètres CSS identiques pour les autres boutons de boîte de dialogue :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button

Propriétés CSS du bouton

L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - Pour configurer un pied de page de boîte de dialogue avec un bouton Annuler de 64 x 34, un bouton Sélectionner tout de 82 x 34 et ayant une couleur de texte et une couleur d’arrière-plan différentes pour chaque état du bouton :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

La zone de dialogue principale, entre l’en-tête et le pied de page, contient le contenu de la boîte de dialogue défilante et le panneau de défilement sur la droite. Dans tous les cas, le composant gère la largeur de cette zone, il n’est pas possible de la définir dans CSS. La zone de dialogue principale est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea

Propriétés CSS de la zone d’affichage de la boîte de dialogue ​

Exemple - Pour définir une zone de boîte de dialogue principale de 300 pixels de hauteur, avoir une marge de dix pixels et utiliser un fond blanc :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

Tout le contenu du formulaire (comme les libellés et les champs de saisie) réside dans un conteneur contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody

Si la hauteur de ce conteneur semble supérieure à la zone de boîte de dialogue principale, un défilement vertical est activé automatiquement par le composant.

Propriétés CSS du corps de la boîte de dialogue ​

Exemple : pour configurer le contenu d’un formulaire avec un remplissage de dix pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody {
    padding: 10px;
}

Tous les libellés statiques du formulaire de boîte de dialogue sont contrôlés par

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel

Cette classe n’est pas adaptée au contrôle de la taille ou de la position de l’étiquette car vous pouvez l’appliquer à des textes situés à différents endroits de l’interface utilisateur du formulaire.

Propriétés CSS du libellé de la boîte de dialogue. ​

Les libellés des boîtes de dialogue peuvent être localisés. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple : pour définir toutes les étiquettes de manière à ce qu’elles soient grises, en gras avec une police de neuf pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

La taille de la copie de texte affichée au-dessus du code intégré est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide

Propriétés CSS du champ largeur d’entrée de la boîte de dialogue

Exemple : pour définir une copie de texte de 430 pixels de large et un remplissage de dix pixels dans la partie inférieure :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

Le code incorporé est encapsulé dans un conteneur et contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

Propriétés CSS du conteneur d’entrée de la boîte de dialogue

Exemple - pour définir une bordure grise d’un pixel autour du texte du code intégré, faites-le large de 430 pixels et disposez d’un remplissage de dix pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

Le texte du code intégré est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

Propriétés CSS du conteneur d’entrée de la boîte de dialogue

Exemple - Pour configurer le code incorporé afin d’utiliser break-word le retour automatique à la ligne :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

L’étiquette de taille intégrée et la liste déroulante se trouvent au bas de la boîte de dialogue et placées dans un conteneur contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

Propriétés CSS du panneau Taille intégrée de la boîte de dialogue

Exemple : pour configurer un panneau de taille incorporée de manière à avoir dix pixels de remplissage :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

La taille et l’alignement du libellé de taille incorporée sont contrôlés par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

Propriétés CSS du panneau Taille intégrée de la boîte de dialogue

Exemple : pour définir l’étiquette de taille intégrée de manière à ce qu’elle soit alignée en haut et large de 80 pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

La largeur de la zone de liste déroulante Taille intégrée est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox

Propriétés CSS de la zone de liste déroulante

Exemple : pour définir la zone de liste déroulante de taille intégrée de manière à 300 pixels de large lors de l’affichage d’un élément prédéfini et à 110 pixels lors de l’affichage d’une taille personnalisée :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

La hauteur du texte de la zone de liste déroulante est définie par un élément interne spécial et est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext

Propriétés CSS du texte de la zone de liste modifiable

Exemple : pour définir la hauteur du texte de la zone de liste déroulante de taille intégrée sur 40 pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

La boîte de liste déroulante a un bouton « liste déroulante » sur la droite et elle est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton

Propriétés CSS du bouton Zone de liste déroulante

Exemple : pour définir un bouton déroulant sur 28 x 28 pixels et avoir une image distincte pour chaque état :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

Le panneau avec la liste des tailles intégrées affichées lorsque la zone de liste déroulante est ouverte est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown

La taille et la position du panneau sont contrôlées par le composant. Il n’est pas possible de le modifier via CSS.

Propriétés CSS de la liste déroulante de liste déroulante

Exemple - pour définir le panneau de liste déroulante de sorte qu’il ait une bordure grise d’un pixel :

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

Un seul élément dans un menu déroulant contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor

Propriétés CSS de l’ancre d’élément de liste déroulante

Exemple - pour définir un arrière-plan blanc pour l’élément du panneau de zone modifiable :

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

Coche affichée à gauche de l’élément sélectionné dans le panneau de la zone de liste déroulante contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark

Propriétés CSS de la case à cocher

Exemple - pour définir l’icône en forme de coche sur 25 x 25 pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

Lorsque l’option « Taille personnalisée » est sélectionnée dans la zone de liste déroulante Taille intégrée, la boîte de dialogue affiche deux champs de saisie supplémentaires à droite pour permettre à l’utilisateur de saisir une taille d’intégration personnalisée. Ces champs sont encapsulés dans un conteneur contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel

Propriétés CSS du panneau Taille personnalisée de la boîte de dialogue

Exemple : pour définir la taille personnalisée du panneau des champs d’entrée de 20 pixels à droite de la zone de liste déroulante :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

Chaque champ d’entrée de taille personnalisée est enveloppé dans un conteneur qui effectue le rendu d’une bordure et définit la marge entre les champs. Elle est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize

Propriétés CSS de la boîte de dialogue taille personnalisée

Exemple - Pour définir la taille personnalisée des champs de saisie de manière à ce qu’ils comportent une bordure grise d’un pixel, une marge, une marge intérieure et une largeur de 70 pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

Si un défilement vertical est nécessaire, la barre de défilement est rendue dans le panneau situé près du bord droit de la boîte de dialogue, qui est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel

Propriétés CSS du panneau de défilement de la boîte de dialogue

Exemple : configuration d’un panneau de défilement de 44 pixels de large

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel {
    width: 44px;
}

L’aspect de la zone de la barre de défilement est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar

Propriétés CSS de la barre de défilement

Exemple : pour configurer une barre de défilement de 28 pixels de large et dotée d’une marge de huit pixels à partir du haut, de la droite et du bas du panneau de défilement :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

La piste de la barre de défilement correspond à la zone située entre les boutons de défilement supérieur et inférieur. Le composant définit automatiquement la position et la hauteur de la piste. La piste est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack

Propriétés CSS de la piste de la barre de défilement

Exemple - pour configurer une piste de barre de défilement de 28 pixels de large avec un arrière-plan gris :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

Le pouce de la barre de défilement se déplace verticalement dans une zone de piste de défilement. Sa position verticale est entièrement contrôlée par la logique du composant. Toutefois, la hauteur de miniature ne change pas dynamiquement en fonction de la quantité de contenu. La hauteur du pouce et d’autres aspects peuvent être configurés avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb

Propriétés CSS du pouce de la barre de défilement

Exemple : pour configurer une barre de défilement de 28 x 45 pixels, avec une marge de dix pixels en haut et en bas et une illustration différente pour chaque état :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

L’apparence des boutons de défilement supérieur et inférieur est contrôlée par les sélecteurs de classe CSS suivants :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

Il est impossible de positionner les boutons de défilement à l’aide de CSS top, left, bottomet right des propriétés. Au lieu de cela, la logique de la visionneuse les positionne automatiquement.

Propriétés CSS des boutons de défilement supérieur et inférieur

Les info-bulles des boutons peuvent être localisées. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple : pour configurer des boutons de défilement de 28 x 32 pixels avec des illustrations différentes pour chaque état :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}