/*
------------------------------------------------------------------------
Title        : artnet_button.css
------------------------------------------------------------------------
             This is an UNPUBLISHED work COPYRIGHT by
         "ArtCom GmbH"; Haferwende 2; D-28357 Bremen; Germany
      It may be used, copied, or distributed only as permitted in a
                            written license.
------------------------------------------------------------------------
Created : 29-10-2007 kk
Version : $Id: artnet_button.css,v 1.12 2010-02-01 17:53:19 kk Exp $
Remarks : Knopf-Design. Etwas moderner, sprachunabhaengig benutzbar:
            Letztendlich bestehend aus 2 Grafiken die zusammengesetzt
            werden (wird in der Breite automatisch je nach Textlaenge
            justiert) und ueber die dann der Knopftext platziert wird.
------------------------------------------------------------------------
Beispiel: Zeile mit zwei Knoepfen 'Cancel' und 'Okay':
            
	       <!-- Hier geht's los mit den Knoepfen: -->
           <tr>
	        <td style="text-align: right; vertical-align: middle;">
	          <div id="artnet-button">
	             <span>
	               <input class="button-gray" type="submit" name="cancel" 
	                      value='<%=session.getAttribute("main.cancel")%>' />
	             </span>
	          </div>   
	        </td>     
	        <td style="text-align: right; vertical-align: middle;">
	          <div id="artnet-button">
                 <span>
	               <input class="button-gray" type="submit" name="okay" 
	                      value='<%=session.getAttribute("main.okay")%>' />
	             </span>
	          </div>
	        </td>
	       </tr>
	       <!-- Ende Knoepfe -->
	              
	              
          !!! Das Aligment der Knoepfe in der HTML richtig zu machen ist !!!
          !!! leider nicht ganz so einfach. Das hat mich einige Stunden  !!!
          !!! Probieren gekostet und geht immer noch nicht richtig.      !!!
          !!! Deshalb gibt es unten auch zwei Versionen.                 !!!
------------------------------------------------------------------------------
*/

#artnet-button {
  float: left;
  /*width: 72em;*/
  width: 1em; /* ...fuer %-padding */
  line-height: normal;
  /* Das 'padding' bestimmt die Lage der Knoepfe bzw. den aussenliegenden
     Rand. Leider gibt es da kein einfaches 'mittig': */
  /*padding: 0 0 0  1em;*/
  padding: 0 50% 0 40%; /*...leicht 'linkslastig'(<top> <right> <bott> <left>)*/
  margin: 0;
  list-style: none;
  font-weight: bold;
  font-size: 90%;
}

/* nochmal das gleiche ohne 'pseudo-mittig' (fuer mehrere Knoepfe in Zeile): */
#artnet-button-left {
  float: left;
  /*width: 72em;*/
  width: 1em; /* ...fuer %-padding */
  line-height: normal;
  padding: 0 0 0 15%; /*(<top> <right> <bott> <left>)*/
  margin: 0;
  list-style: none;
  font-weight: bold;
  font-size: 90%;
}

/* nochmal das gleiche fuer einen Knopf in einer Zeile mit anderen Dingen: */
#artnet-singlebutton {
  float: left;
  /*width: 72em;*/
  /*width: 1em;*/ /* ...fuer %-padding */
  line-height: normal;
  padding: 0 0 0 0; /*(<top> <right> <bott> <left>)*/
  margin: 0;
  list-style: none;
  font-weight: bold;
  font-size: 90%;
}

#artnet-button ul {
  margin: 0;
  padding:5px 5px 0;
  list-style:none;
}

#artnet-button li {
  float: left;
  background:url("butt_left.png") no-repeat left top;
  margin: 0;
  padding:0 0 10px 7px; /*(<top> <right> <bott> <left>)*/
}

#artnet-button span {
  float: left;
  background:url("butt_left.png") no-repeat left top;
  margin: 0;
  padding:0 0 10px 7px; /*(<top> <right> <bott> <left>)*/
  /*color:#6D6D6D;*/
  color:#000000;
}

#artnet-button-left span {
  float: left;
  background:url("butt_left.png") no-repeat left top;
  margin: 0;
  padding:0 0 10px 7px; /*(<top> <right> <bott> <left>)*/
  /*color:#6D6D6D;*/
  color:#000000;
}

#artnet-singlebutton span {
  float: left;
  background:url("butt_left.png") no-repeat left top;
  margin: 0;
  padding:0 0 5px 7px; /*(<top> <right> <bott> <left>)*/
  /*color:#6D6D6D;*/
  color:#000000;
}

#artnet-button input {
  float: left;
  display: block;
  background:url("butt_right.png") no-repeat right top;
  padding:5px 15px 10px 7px; /*(<top> <right> <bott> <left>)*/
  text-decoration:none;
  /*color:#6D6D6D;*/
  color:#000000;
  border-width:0px;
  font-weight: bold;
  font-size: 90%;
}

#artnet-button-left input {
  float: left;
  display: block;
  background:url("butt_right.png") no-repeat right top;
  padding:5px 15px 10px 7px; /*(<top> <right> <bott> <left>)*/
  text-decoration:none;
  /*color:#6D6D6D;*/
  color:#000000;
  border-width:0px;
  font-weight: bold;
  font-size: 90%;
}

#artnet-singlebutton input {
  float: left;
  /*display: block;*/
  display: inline;
  background:url("butt_right.png") no-repeat right top;
  padding:5px 15px 5px 7px; /*(<top> <right> <bott> <left>)*/
  text-decoration:none;
  /*color:#6D6D6D;*/
  color:#000000;
  border-width:0px;
  font-weight: bold;
  font-size: 90%;
}

#artnet-button a {
  float: left;
  display: block;
  background:url("butt_right.png") no-repeat right top;
  padding:5px 15px 10px 7px; /*(<top> <right> <bott> <left>)*/
  text-decoration:none;
  /*color:#6D6D6D;*/
  color:#000000;
  border-width:0px;
  font-weight: bold;
  font-size: 90%;
}

/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#artnet-button input {float:none;}
#artnet-button-left input {float:none;}
#artnet-singlebutton input {float:none;}
/* End IE5-Mac hack */

#artnet-button span:hover {
  background-image:url("butt_left_on.png");
  color:#000000;
  /*color:#6D6D6D;*/	
}

#artnet-button-left span:hover {
  background-image:url("butt_left_on.png");
  color:#000000;
  /*color:#6D6D6D;*/	
}

#artnet-singlebutton span:hover {
  background-image:url("butt_left_on.png");
  color:#000000;
  /*color:#6D6D6D;*/	
}

#artnet-button input:hover {
  background-image:url("butt_right_on.png");
  color:#000000;
  /*color:#6D6D6D;*/
}

#artnet-button-left input:hover {
  background-image:url("butt_right_on.png");
  color:#000000;
  /*color:#6D6D6D;*/
}

#artnet-singlebutton input:hover {
  background-image:url("butt_right_on.png");
  color:#000000;
  /*color:#6D6D6#;*/
}

#artnet-button a:hover {
  background-image:url("butt_right_on.png");
  color:#000000;
  /*color:#6D6D6D;*/
}


/*-----------------------------------------------------------------------*/
/* Das selbe noch einmal für Icon Knoepfe (Backgr-Images: 48 Pixel Hoehe)*/
/* Hier gibt es ein Icon welches als Knopf visualisiert werden soll.     */
/* Dieses wird ueber zwei Background Images gelegt, welche den Knopf-    */
/* Hintergrund bilden. Bei 'hover' wird auf zwei andere Background-      */
/* images umgeschaltet.                                                  */
/* Beispiel:                                                             */
/*    <div id="artnet-iconbutton">                                       */
/*      <span id="artnet-iconbutt" class="plain">                        */
/*        <input class="button-gray48" type="image" name="sendselections"*/
/*               value='<%=session.getAttribute("artnet.sendButton")%>'  */
/*               src="stati_abschicken.png"                              */
/*               title='<%=session.getAttribute("artnet.sendButton")%>'  */
/*               align="middle" />                                       */
/*      </span>                                                          */
/*    </div>                                                             */
/* Statt "<input.../>" ggf auch "<a href=...><img src=...></a>"          */
/*-----------------------------------------------------------------------*/

#artnet-iconbutton {
  float: left;
  /*width: 72em;*/
  width: 1em; /* ...fuer %-padding */
  line-height: normal;
  /* Das 'padding' bestimmt die Lage der Knoepfe bzw. den aussenliegenden
     Rand. Leider gibt es da kein einfaches 'mittig': */
  /*padding: 0 0 0  1em;*/
  /*padding: 0 50% 0 40%; /*...leicht 'linkslastig'(<top> <right> <bott> <left>)*/
  margin: 0;
  list-style: none;
  font-weight: bold;
  font-size: 90%;
}

#artnet-iconbutton span {
  float: left;
  background:url("butt_left48.png") no-repeat left top;
  margin: 0;
  padding:0 0 10px 7px; /*(<top> <right> <bott> <left>)*/
  /*color:#6D6D6D;*/
  color:#000000;
}

#artnet-iconbutton input {
  float: left;
  display: block;
  background:url("butt_right48.png") no-repeat right top;
  padding:5px 15px 10px 7px; /*(<top> <right> <bott> <left>)*/
  text-decoration:none;
  /*color:#6D6D6D;*/
  color:#000000;
  border-width:0px;
  font-weight: bold;
  font-size: 90%;
  width: 36px;
  height: 36px;
}

#artnet-iconbutton a {
  float: left;
  display: block;
  background:url("butt_right48.png") no-repeat right top;
  padding:5px 15px 10px 7px; /*(<top> <right> <bott> <left>)*/
  text-decoration:none;
  /*color:#6D6D6D;*/
  color:#000000;
  border-width:0px;
  font-weight: bold;
  font-size: 90%;
}

#artnet-iconbutton img {
  width: 36px;
  height: 36px;
}


/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#artnet-iconbutton input {float:none;}
/* End IE5-Mac hack */


#artnet-iconbutton span:hover {
  background-image:url("butt_left48_on.png");
  color:#000000;
  /*color:#6D6D6D;*/	
}

#artnet-iconbutton input:hover {
  background-image:url("butt_right48_on.png");
  color:#000000;
  /*color:#6D6D6D;*/
}

#artnet-iconbutton a:hover {
  background-image:url("butt_right48_on.png");
  color:#000000;
  /*color:#6D6D6D;*/
}


/*-----------------------------------------------------------------------*/
/* Die folgende Defintion wird fuer Icon-Knoepfe verwendet, bei denen    */
/* das Icon-Image komplett ist, also z.B. schon wie ein Knopf aussieht.  */
/* Hier gibt es dann jeweils zwei Icons, die einmal normal und einmal    */
/* den 'hover'-Zustand visualisiseren.                                   */
/* Technisch werden diese kompletten Images als Background installiert,  */
/* das eigentlich 'Bedienungs'-Image wird als tranparentes input-img     */
/* druebergelegt. Hierzu ist es leider notwendig fuer jedes Icon hier    */
/* zwei css-Definitionen anzulegen und diese auch nur genau fuer dieses  */
/* Icon gelten.                                                          */
/* Beispiel:                                                             */
/*    <div id="artnet-iconbutton2">                                      */
/*      <span id="artnet-iconbutton-sendselections" class="plain">       */
/*         <input type="image" name="sendselections"                     */
/*                value='<%=session.getAttribute("artnet.sendButton")%>' */
/*                src="transparent-1x1.png" width="48" height="48"       */
/*                title='<%=session.getAttribute("artnet.sendButton")%>' */
/*                align="middle" />                                      */
/*      </span>                                                          */
/*    </div>                                                             */
/* Statt "<input.../>" ggf auch "<a href=...><img src=...></a>"          */
/*-----------------------------------------------------------------------*/

#artnet-iconbutton2 {
  float: left;
  width: 1em; /* ...fuer %-padding */
  line-height: normal;
  margin: 0;
  list-style: none;
  font-weight: bold;
  font-size: 90%;
}

#artnet-iconbutton-selectall {
  float: left;
  background:url("waehlen_alle-off.png") no-repeat left top;
  margin: 0;
  color:#000000;
}

#artnet-iconbutton-selectall:hover {
  background-image:url("waehlen_alle-on.png");
  color:#000000;
}

#artnet-iconbutton-selectnone {
  float: left;
  background:url("waehlen_keiner-off.png") no-repeat left top;
  margin: 0;
  color:#000000;
}

#artnet-iconbutton-selectnone:hover {
  background-image:url("waehlen_keiner-on.png");
  color:#000000;
}

#artnet-iconbutton-status-forprint {
  float: left;
  background:url("gut_zum_druck-off.png") no-repeat left top;
  margin: 0;
  color:#000000;
}

#artnet-iconbutton-status-forprint:hover {
  background-image:url("gut_zum_druck-on.png");
  color:#000000;
}

#artnet-iconbutton-status-forcorrection {
  float: left;
  background:url("zur_korrektur-off.png") no-repeat left top;
  margin: 0;
  color:#000000;
}

#artnet-iconbutton-status-forcorrection:hover {
  background-image:url("zur_korrektur-on.png");
  color:#000000;
}

#artnet-iconbutton-sendselections {
  float: left;
  background:url("stati_abschicken-off.png") no-repeat left top;
  margin: 0;
  color:#000000;
}

#artnet-iconbutton-sendselections:hover {
  background-image:url("stati_abschicken-on.png");
  color:#000000;
}

#artnet-iconbutton-mail {
  float: left;
  background:url("korrektur_mail-off.png") no-repeat left top;
  margin: 0;
  color:#000000;
}

#artnet-iconbutton-mail:hover {
  background-image:url("korrektur_mail-on.png");
  color:#000000;
}

#artnet-iconbutton-pageflip {
  float: left;
  background:url("auftrag_blaettern-off.png") no-repeat left top;
  margin: 0;
  color:#000000;
}

#artnet-iconbutton-pageflip:hover {
  background-image:url("auftrag_blaettern-on.png");
  color:#000000;
}