/* $Header: /ILWebsite/www/styles/styles-il-subpages.css 32 2009-09-02 16:22:57 kto $ */
@import "styles.css";

body.il-media-subpage {	background:url("/images/layout/background-il-media.jpg") top left repeat-x #a7a7a7; }
body.il-system-subpage { background:url("/images/layout/background-il-system.jpg") top left repeat-x #2e3e55;}
body.il-system-subpage #footer, body.il-system-subpage #footer a { color:#ffffff; }

/******************************************************
  #MIDDLE enthält:
	- middle-helper
	- left
	- right
******************************************************/
#middle { position:relative;
          width:960px;
		  background:#ffffff url("/images/layout/middle-background.gif") bottom left repeat-y; }

/* #middle-helper für Hintergrund-Grafiken notwendig */
#middle-helper { position:relative;
                 width:960px;
				 background:#ffffff url("/images/layout/middle-helper-background.gif") bottom right repeat-y; }
				 
#middleclone { position:relative;
          width:960px;
		  background:#ffffff; 
		  clear:both;
		  }
#middleclone p{
	padding:10px;
}

#middleclone h3{
	padding:10px 10px 2px 10px;
}

#middleclone table{
	padding:10px 10px 2px 10px;
}

/**********************************************
  #LEFT enthält                            
  - left-nav
  - il-media nav mit Bildern 
  - highlights
  - references steht in allgemeiner style-Datei
**********************************************/
#left { float:left;
		border-right:2px solid #f1f2f4;
        width:202px;
		background:#ffffff;
		font-size:12px;
		line-height:16px;}
		
/*******************************************
  IL-Media-Bilder Navigation links
*******************************************/		
#subpage-nav { 	width:200px;
                height:305px;
				padding:0px;
				border:0px;
				margin:0px;
				margin-left:2px; }

#subpage-nav a, #subpage-nav a:hover { text-decoration:none;
                                       display:block;
									   width:200px; }

#subpage-nav-a { background:url("/images/content/images-il-media/subpage-nav-background-videohosting.gif") top left no-repeat;
                  height:106px; }
#subpage-nav-1 a { background:url("/images/content/images-il-media/subpage-nav-video-hosting.gif") top left no-repeat;
	  				height:40px; }
#subpage-nav-1 a.active, #subpage-nav-1 a:hover { background:url("/images/content/images-il-media/subpage-nav-video-hosting-active.gif") top left no-repeat; }
#subpage-nav-2 a { background:url("/images/content/images-il-media/subpage-nav-on-demand-streaming-service.gif") top left no-repeat;
                    height:19px; }
#subpage-nav-2 a.active, #subpage-nav-2 a:hover { background:url("/images/content/images-il-media/subpage-nav-on-demand-streaming-service-active.gif") top left no-repeat; }
#subpage-nav-3 a { background:url("/images/content/images-il-media/subpage-nav-live-streaming-service.gif") top left no-repeat;
                    height:19px; }
#subpage-nav-3 a.active, #subpage-nav-3 a:hover { background:url("/images/content/images-il-media/subpage-nav-live-streaming-service-active.gif") top left no-repeat; }
#subpage-nav-4 a { background:url("/images/content/images-il-media/subpage-nav-fmis-fms3-hosting.gif") top left no-repeat;
                    height:28px; }
#subpage-nav-4 a.active, #subpage-nav-4 a:hover { background:url("/images/content/images-il-media/subpage-nav-fmis-fms3-hosting-active.gif") top left no-repeat; }


#subpage-nav-b { background:url("/images/content/images-il-media/subpage-nav-background-videoplayer.gif") top left no-repeat;
                  height:106px;
				  margin:2px 0; }
				  
#subpage-nav-6 a { background:url("/images/content/images-il-media/subpage-nav-video-player.gif") top left no-repeat;
	  				height:40px; }

#subpage-nav-6 a.active, #subpage-nav-6 a:hover {background:url("/images/content/images-il-media/subpage-nav-video-player-active.gif") top left no-repeat;}

#subpage-nav-7 a { background:url("/images/content/images-il-media/subpage-nav-freeplayer.gif") top left no-repeat;
	  				height:19px; }

#subpage-nav-7 a.active, #subpage-nav-7 a:hover {background:url("/images/content/images-il-media/subpage-nav-freeplayer-active.gif") top left no-repeat;}

#subpage-nav-8 a { background:url("/images/content/images-il-media/subpage-nav-pointnclick.gif") top left no-repeat;
	  				height:18px; }

#subpage-nav-8 a.active, #subpage-nav-8 a:hover {background:url("/images/content/images-il-media/subpage-nav-pointnclick-active.gif") top left no-repeat;}

#subpage-nav-9 a { background:url("/images/content/images-il-media/subpage-nav-indyplayer.gif") top left no-repeat;
	  				height:28px; }

#subpage-nav-9 a.active, #subpage-nav-9 a:hover {background:url("/images/content/images-il-media/subpage-nav-indyplayer-active.gif") top left no-repeat;}

/*#subpage-nav-10 a { background:url("/images/content/images-il-media/subpage-nav-player-modules.gif") top left no-repeat;
	  				height:28px; }

#subpage-nav-10 a.active, #subpage-nav-10 a:hover {background:url("/images/content/images-il-media/subpage-nav-player-modules-active.gif") top left no-repeat;}*/


#subpage-nav-c a{ background:url("/images/content/images-il-media/subpage-nav-services-atoz.gif") top left no-repeat;
                  height:45px; }

#subpage-nav-c a.active, #subpage-nav-c a:hover { background:url("/images/content/images-il-media/subpage-nav-services-atoz-active.gif") top left no-repeat;}


#videoplayer{ 	width:725px;
                height:245px;
				padding:0px;
				border:0px;
				margin:0px;
				margin-left:2px;}

#videoplayer a, #videoplayer a:hover{
		padding:0px;
		height:245px;
		text-decoration:none;
		display:block;
}

#videoplayer-free a{background:url("/images/content/images-il-media/videoplayer_free.jpg") top left no-repeat;				
					width:241px; 
					float:left}

#videoplayer-free a.active, #videoplayer-free a:hover{background:url("/images/content/images-il-media/videoplayer_free_over.jpg") top left no-repeat;
					width:241px;}
					
#videoplayer-pointnclick a{background:url("/images/content/images-il-media/videoplayer_pointnclick.jpg") top left no-repeat;
					width:242px;
					float:left}

#videoplayer-pointnclick a.active, #videoplayer-pointnclick a:hover{background:url("/images/content/images-il-media/videoplayer_pointnclick_over.jpg") top left no-repeat;
					width:242px;}

#videoplayer-individual a{background:url("/images/content/images-il-media/videoplayer_individual.jpg") top left no-repeat;
					width:241px;
					float:left}

#videoplayer-individual a.active, #videoplayer-individual a:hover{background:url("/images/content/images-il-media/videoplayer_individual_over.jpg") top left no-repeat;
					width:241px;}
					

/*******************************************
  LEFT-NAV
*******************************************/
#left-nav { margin-bottom:50px; /*Abstand zu Highlights*/}

ul#left-nav { list-style-image:none;
              list-style-type:none;
              background:#ffffff;
			  padding:0;
			  margin:0;
			  margin-right:8px;
			  margin-bottom:50px; /* Abstand zu Highlights */
			  border-bottom:2px dotted #f1f2f4;
			  font-size:12px; }

/* Reguläre Formate für Haupt-Menüpunkte */
ul#left-nav li { border-top:2px dotted #f1f2f4;
  				 padding:2px;
	  			 padding-right:0px;
		  		 padding-left:8px;
				 margin:0px; }
ul#left-nav a { display:block;
                padding:10px;
                color:#284469;
                text-decoration:none; }

/* Rollover für Haupt-Menüpunkte */
ul#left-nav a:hover { background:#284469;
                      color:#ffffff; }

/********************************************
  SUBNAV
********************************************/

/* Formate für Haupt-Menüpunkt mit ausgewähltem Unterpunkt */
ul#left-nav li.items-subnav-active a, ul#left-nav li.items-subnav-active a:hover { background:#284469;
                                                                                   color:#ffffff;
	    																	       font-weight:bold; }
/* Reguläre Formate für Unterpunkte */
ul#left-nav li.subnav, ul#left-nav li.subnav-active { border-top:none;
                                                      padding:2px;
						    						  padding-left:7px;
								    				  padding-right:0px; }
ul#left-nav li.subnav a { background:#ffffff url("/images/layout/subnav-list-style-image.gif") 12px 15px no-repeat;
                          color:#6699cc;
						  padding-left:26px; }

/* Formate für Unterpunkte, die ausgewählt sind */
ul#left-nav li.subnav-active a, ul#left-nav li.subnav-active a:hover { background:#003366 url("/layout/subnav-list-style-image-active.gif") 12px 15px no-repeat;;
                                                                       color:#ffffff;
                                         							   padding-left:26px; }

/* Rollover für Unterpunkte */
ul#left-nav li.subnav a:hover { background:#a6aeb6 url("/images/layout/subnav-list-style-image-active.gif") 12px 15px no-repeat;
                                color:#ffffff;
								padding-left:26px; }

/*********************************************
  HIGHLIGHTS
  *******************************************/
#highlights { background:#ffffff;
			  margin-bottom:15px;
			  border-bottom:2px dotted #f1f2f4;
			  margin-right:8px; }
#highlights a { color:#000000;
                text-decoration:none; }
.highlight { border-top:2px dotted #f1f2f4;
             background:#ffffff;
			 padding:10px; }

/* Klassen zum Einbinden des Highlights-Icons als Hintergrund-Grafik
   -> Positionierung muss eingestellt werden */
.highlight-download { background:#ffffff url("/images/layout/highlight-download.gif") 18px 12px no-repeat;
                      padding-left:60px; }
.highlight-checkout { background:#ffffff url("/images/layout/highlight-checkout.gif") 18px 14px no-repeat;
                      padding-left:60px; }

/*******************************************************************************
  RIGHT enthält
	- h1 mit Section Headline
	und je nach Layout-Variante:
	- #one-column-content für einspaltigen Inhalt
	- #two-columns-content für zweispaltigen Inhalt der folgenden Art:
	--- #left-column und #right-column für 50/50-Aufteilung
	--- #broad-column und #small-column für breite Spalte links und schmale rechts
*******************************************************************************/

/* keine Breiten-Angabe umgeht IE-Box-Modell-Fehler */
#right { position:relative;
         /*margin-left:15px;*/
		 margin:0px 0px 0px 204px;
		 padding:0px 15px 0px 15px; 		
		 min-height:400px;
		 height:auto !important;
		 height:400px;}

#right h1 { color:#f37121;		
            font-size:20px;
			line-height:30px;
			padding-bottom:5px;
            border-bottom:2px dotted #163458;}

#right h2 { border-bottom:2px dotted #f37121;
			color:#163458;
			font-size:14px;
			padding-bottom:1px;			
			margin-bottom:5px;}


#right h3{ font-size:11px;
		   font-weight:bold;
		   color:#284469;
		   border-bottom:dotted 1px #666666;
		   padding:0px;		   
		   margin-bottom:5px;}

#main h1 { color:#f37121;		
            font-size:20px;
			line-height:30px;
			padding-bottom:5px;
			font-weight:bold;}			


			
#right img {
	background:#FFFFFF;
	/*border:1px #b6b6b6 dotted;*/
	border:none;
	float:left;
	padding: 5px 5px 5px 5px;
	margin:0px 5px 5px 0px;
	display:block;}

#right .inline-img {
	display:inline;		
	float:none;
	vertical-align:baseline;
	padding:0px;
	margin:0px;
}


.button { background:#FFFFFF;
		  width:172px;
		  height:27px;
		  padding:0px;
		  border:0px;
		  margin:5px 0px 5px 0px;
		  float:right;
}

.buttoncontact{
	    width:172px;
		height:27px !important;
		float:right;
		padding:0px;
		border:0px;
		margin:5px 0px 5px 0px;
}


.button a, button.a:hover { text-decoration:none;
                            display:block;
							width:172px; }

.button a.order{ 	background:url("/images/content/images-il-media/button_order-now.jpg") top left no-repeat;
					height:27px;
					width:172px;}

.button a.projectcalculator{ background:url("/images/content/images-il-media/button_project-calculator.jpg") top left no-repeat;
							 height:27px;
							 width:172px;}
							 
.button a.requestquote{ background:url("/images/content/images-il-media/button_request-quote.jpg") top left no-repeat;
							 height:27px;
							 width:172px;}

.button a.moreinfo{ background:url("/images/content/images-il-media/button_more-information.jpg") top left no-repeat;
							 height:27px;
							 width:172px;}

#one-column-content { margin-top:15px; }

#two-columns-content { margin-top:15px;
                       background:#ffffff; }

#two-columns-content #left-column { /*width:355px; */
									width:350px; 
                                    background:#ffffff; }
#two-columns-content #right-column { position:relative;
                                     /*width:355px; */
									 width:350px;
									 float:right;
                                     background:#ffffff; }

#two-columns-content #broad-column { width:500px; 
                                     background:#ffffff; }									 
#two-columns-content #small-column { position:relative;
                                     top:-8px; /* damit margin des ersten Elements rückgängig gemacht wird */
									 width:194px;									                                     
									 float:right;
									 background:#ffffff;}

/*************************************************
  #SMALL-COLUMN-FORMATE
*************************************************/

/* Text-Inhalte in p-Tags */
#small-column p { padding:8px;
                  margin:8px 0;
				  padding-left:34px;}

/* Standard-Liste mit list-image */
#small-column ul { list-style-image:url("/images/layout/list-style-image.gif");
				   background:#ffffff;
				   padding-left:25px;
				   margin:8px 0; }
#small-column li { margin:8px 0; }

#small-column h2 { background:#f1f2f4;
				   border-bottom:none;
                   font-size:12px;
                   font-weight:bold;
				   padding:8px;
				   /*padding-left:34px;*/
				   padding-left:40px;
				   margin:8px 0; }
#small-column h2.pdf { background:#f1f2f4 url("/images/layout/icon-pdf.gif") 8px 8px no-repeat; }
#small-column h2.xls { background:#f1f2f4 url("/images/layout/icon-xls.gif") 8px 8px no-repeat; }
#small-column h2.doc { background:#f1f2f4 url("/images/layout/icon-doc.gif") 8px 8px no-repeat; }
#small-column h2.ff { background:#f1f2f4 url("/images/layout/icon-ff.gif") 2px 4px no-repeat; }
#small-column h2.standard { background:#f1f2f4 url("/images/layout/headline_standard.gif") 8px 8px no-repeat; }

/* Listen mit Datei-Typ-Icons */
#small-column ul.pdf { list-style-image:url("/images/layout/icon-pdf.gif");
                       padding-left:32px; }
#small-column ul.xls { list-style-image:url("/images/layout/icon-xls.gif");
						padding-left:32px; }
#small-column ul.doc { list-style-image:url("/images/layout/icon-doc.gif");
						padding-left:32px; }

/* Datei-Typ-List-Items für gemischte Listen */
#small-column li.pdf { list-style-image:url("/images/layout/icon-pdf.gif"); }
#small-column li.xls { list-style-image:url("/images/layout/icon-xls.gif"); }
#small-column li.doc { list-style-image:url("/images/layout/icon-doc.gif"); } 

/* Order now-Button */
#small-column .order-now { text-decoration:none;
                           height:23px;
						   cursor:hand;
                           background:#ffffff;
						   margin-right:6px 0;
						   background:url("/images/layout/button-order-now.gif") no-repeat; }

/* Gepunktete Linie als Trennelement */
#small-column .separator-with-border { line-height:0px;
                                       font-size:0px;
									   border-top:2px dotted #f1f2f4;
									   margin:8px 0; }
						 

.calc {	width:340px;
		padding:5px;}
		
.calcleft { float:left;		
		line-height:21px;}
	
.calcright { float:right;
		 line-height:21px;}	

.more {	display: none;	}

.info {	display: none;	}

.trenner { height:10px;}

.tcontainer{ position:relative;
			 float:left;}

.tablehelper{ width:150px;
			  float:left;
				position:relative;}
.tablehelper_right{ float:right;					
					width:560px;
					position:relative;}