/**
 * @title Swisscom CICD Stylesheet
 * @discritption 	This file contains global elements for swisscom ci-cd 
 * 					sites and should be adapted in every swisscom web project.
 * 					<strong>
 * 						This CSS File is valid  CSS 2.1, checked against the 
 * 						W3C CSS checker. Please keep it this way!
 * 					</strong>
 * @author matthias.jaeggli@orange8.com
**/

/*
IMPORTANT:
This file is propper commented and blown up in size. Therefore you have 
to shrink this file with a CSS optimizer, essentially.
http://www.cssdrive.com/index.php/main/csscompressor/


+-------------+---------+-------------------------------------------------+
  Date          Version   Description
+-------------+---------+-------------------------------------------------+
  2009-06-12     1.0.11   Inserted standardbutton-back
                          matthias.jaeggli@orange8.com

  2009-05-25     1.0.10   Expanded tree navigation deepness
                          matthias.jaeggli@orange8.com

  2009-04-27      1.0.9   Tree-Navigation two line links
                          matthias.jaeggli@orange8.com
						  
  2009-04-21      1.0.8   Several Bugfixes for IE6
                          matthias.jaeggli@orange8.com
						  
  2009-04-14      1.0.7   Added Wide Layout Styles
                          matthias.jaeggli@orange8.com
						  
  2009-04-08      1.0.6   Added Teserless Template Styles
                          oh@haraio.com
  
  2009-04-08      1.0.5   Join of all the past cicd-css
                          matthias.jaeggli@orange8.com
						  
  2009-04-01      1.0.4   Standardbutton alpha-transp. better fix, for IE6
                          matthias.jaeggli@orange8.com
  
  2009-03-23      1.0.3   Second Nav are small links again
                          matthias.jaeggli@orange8.com
						  
  2009-03-18      1.0.2   Added Sidebar-Teasers, Showroom, Content Block
                          matthias.jaeggli@orange8.com
						  
  2009-02-02      1.0.1   Added alpha-transparency to standardbutton
                          corners
                          matthias.jaeggli@orange8.com
						  
  2009-01-24      1.0.0   Final release
                          matthias.jaeggli@orange8.com
						  
  2009-01-21      0.1.1   Replaceds some IDs because of the ASP.NET 
                          convention of garaio
                          matthias.jaeggli@orange8.com
						  
  2009-01-19      0.1.0   Frame: header, navigation and footer
                          matthias.jaeggli@orange8.com
+-------------+---------+-------------------------------------------------+
*/


/*-----------------------------------------------------------------------*/
/* Main Frame                                                            */
/*-----------------------------------------------------------------------*/

/* Wrapper (holds the site and width of the page) */
#wrapper{
	position:relative;
	width:985px;
	}

/* Header */
#header{
	position:relative;
	margin-right:15px;
	height:110px;
	overflow:hidden;
	}
	#header .logo{
		position:absolute;
		top:20px;
		left:38px;
		z-index:10;
		}	
		#header .logo .animation{
			position:absolute;
			top:0;
			left:1px;
			}
	#mainnav{ /* tabs */
		position:absolute;
		top:85px;
		right:0;
		padding-left:102px;
		width:783px;
		height:25px;
		background:url(../images/layout/mainnav-bg.png) no-repeat top left;
		}
		/** html #mainnav{ width:885px }*/
		#mainnav li{
			float:left;
			height:25px;
			}
			#mainnav li a{
				position:relative;
				display:block;
				float:left;
				padding:5px 16px 0 16px;
				height:20px;
				background:url(../images/layout/mainnav-sep.png) no-repeat top right;
				font-size:14px;
				color:#333;
				}
				/** html #mainnav li a{ height:25px; }*/
				#mainnav li a:hover{ color:#1af; }
			#mainnav li.active{
				position:relative;
				left:-10px;
				margin-right:-20px;
				padding-left:10px;
				background:#fff url(../images/layout/mainnav-sh-left.png) no-repeat top left;
				}
				#mainnav li.active a{
					color:#015;
					background-color:#fff;
					padding-right:26px;
					font-weight:bold;
					background:#fff url(../images/layout/mainnav-sh-right.png) no-repeat top right;
					}
	/* Search, links and language switch */
	#headinfo{
		position:absolute;
		top:6px;
		right:0;
		}
		#headerlinks{
			position:relative;
			right:10px;
			top:3px;
			float:right;
			}
			#headerlinks li{
				float:left;
				padding-left:10px;
				}
		#headerform{ float:right; }
			#headerform .searchfield{ width:101px; }
				#headerform .searchfield input.text{ width:68px; }
		#langswitch{
			position:relative;
			top:3px;
			right:-6px;
			float:right;
			}
			#langswitch li{
				float:left;
				padding:0 5px;
				height:12px;
				border-right:1px solid #bbb;
				}
				#langswitch li a{ color:#1af; }
					#langswitch li.active a{ color:#015; }
				#langswitch li a:hover{ color:#015; }
	/* Single link right of tabs */
	#header .shoplink{
		position:absolute;
		right:0;
		bottom:0;	
		padding-right:20px;
		padding-bottom:6px;
		background:url(../images/layout/shoplink-bg.png) no-repeat top right;
		font-size:14px;		
		}
		#header .shoplink:hover{ color:#1af; }
		
/* Content (between header and footer) */
#content{
	position:relative;
	padding-bottom:45px;
	padding-left:15px;
	width:100%;
	background:url(../images/layout/content-bg-bottom.png) no-repeat 285px 100%;
	}
	
#content_teaserless {
	background:transparent url(../images/layout/content-bg-bottom-teaserless.png) no-repeat scroll 285px 100%;
	padding-bottom:45px;
	padding-left:15px;
	position:relative;
	width:990px;
	}


/* Navigation (tree, left column) */
#nav{
	float:left;
	width:185px;
	margin-left:85px;
	padding-top:28px;
	}
	* html #nav{ display:inline; }
	#nav .tree-nav,
	#nav .tree-nav ul{
		line-height:14px;
		font-family:"Trebuchet MS", Arial, Sans;
		}
	#nav .tree-nav a{
		display:block;
		padding-left:10px;
		background:url(../images/layout/nav-a.png) no-repeat 0 4px;
		color:#666;
		}
	#nav .tree-nav li{ position:relative; }
		#nav .tree-nav li{ 
			border:1px solid #fff;
			margin:-1px 0;
			}
	#nav .tree-nav ul{ padding-left:10px; }
	#nav .tree-nav a:hover,
	#nav .tree-nav li.active li a:hover,
	#nav .tree-nav li.active li.active li a:hover,
	#nav .tree-nav li.active li.active li.active li a:hover,
	#nav .tree-nav li.active li.active li.active li.active li a:hover,
	#nav .tree-nav li.active li.active li.active li.active li.active li a:hover,
	#nav .tree-nav li.active li.active li.active li.active li.active li.active li a:hover,
	#nav .tree-nav li.active li.active li.active li.active li.active li.active li.active li a:hover{ color:#1af;  }
	#nav .tree-nav li.active a,
	#nav .tree-nav li.active li.active a,
	#nav .tree-nav li.active li.active li.active a,
	#nav .tree-nav li.active li.active  li.active li.active a,
	#nav .tree-nav li.active li.active li.active li.active li.active a,
	#nav .tree-nav li.active li.active li.active li.active li.active li.active a,
	#nav .tree-nav li.active li.active li.active li.active li.active li.active li.active a,
	#nav .tree-nav li.active li.active li.active li.active li.active li.active li.active li.active a{ 
		color:#015; 
		background-position:0px -46px;
		}
	#nav .tree-nav li.active li a,
	#nav .tree-nav li.active li.active li a,
	#nav .tree-nav li.active li.active li.active li a,
	#nav .tree-nav li.active li.active li.active li.active li a,
	#nav .tree-nav li.active li.active li.active li.active li.active li a,
	#nav .tree-nav li.active li.active li.active li.active li.active li.active li a,
	#nav .tree-nav li.active li.active li.active li.active li.active li.active li.active li a{ 
		color:#666; 
		background-position:0px 4px;
		}
	#nav .sec-nav{
		margin:11px 0;
		padding:8px 0 0 0px;
		border-top:1px solid #bbb;
		}

/* Subject (data column) */
#subject{
	position:relative;
	float:left;
	width:485px;
	padding:0 15px;
	padding-top:28px;
	background:url(../images/layout/content-bg-top.png) no-repeat top left;
	}
	/** html #subject { width:515px; }*/
	#subject a{ color:#1af; }
	#subject a:hover{ text-decoration:underline; }
	#subject h2 a:hover{ text-decoration:none; }
	#subject .showroom{ 
		position:relative; 
		margin-bottom:17px;
		width:100%;
		}
		#subject .showroom .standardbutton{
			position:absolute;
			bottom:20px;
			left:20px;
			}
		#subject .showroom .standardbutton-back{
			position:absolute;
			bottom:20px;
			left:auto;
			right:15px;
			}			
	#subject .content-block{
		position:relative;
		padding:0 7px;
		}
		#subject .content-block small{ 
			display:block;
			position:relative;
			margin-bottom:7px;
			line-height:12px;
			color:#666;
			}
			#subject .content-block small.pure{ margin-bottom:0; }
			#subject .content-block small.title{
				display:block;
				margin-top:10px;
				color:#333;
				}
	#subject .bottom-line{
		border-bottom:1px solid #bbb;
		}
		
#subject_teaserless{
	position:relative;
	float:left;
	width:690px;
	padding: 28px 15px 0px 15px;
	background:url(../images/layout/content-bg-top-teaserless.png) no-repeat top left;
	}
	/** html #subject_teaserless { width:700px; }*/
	#subject_teaserless a { color:#1af; }
	#subject_teaserless a.cross-reference { color:#666; }
	#subject_teaserless a:hover{ color:#1af;text-decoration:underline; }
	
/* the wide layout, without sidebar */
#content.wide{ background-image:url(../images/layout/content-bg-bottom-wide.png); }	
#content.wide #subject{
	margin-right:0;
	width:685px;
	background-image:url(../images/layout/content-bg-top-wide.png);
	}
	#content.wide #subject.wide .showroom{}
	/** html #content.wide #subject { width:710px; }*/

/* Sidebar (right column) */
#sidebar{
	float:left;
	padding-top:28px;
	width:185px;
	}
	* html #sidebar li{ margin-bottom:-3px; margin-top:-4px; }
	*+html #sidebar li{ margin-bottom:-3px; margin-top:-4px; }
	#sidebar .cross-reference{
		display:block;
		background-position:0 4px;
		}
		* html #sidebar .cross-reference{ zoom:1; }
		*+html #sidebar .cross-reference{ zoom:1; }
	#sidebar .teaser{
		position:relative;
		top:-16px;
		padding:15px 5px;
		border-bottom:1px solid #bbb;
		}
		* html #sidebar .teaser{ height:0; }
		#sidebar .teaser p{ 	padding-bottom:0; }
		#sidebar .teaser h2{
			color:#015;
			padding-bottom:5px;
			}
			#sidebar .teaser h2 a{ color:#1af; }
		#sidebar .teaser .cross-reference{ margin-top:7px; }
		#sidebar .teaser ul .cross-reference,
		#sidebar .teaser ol .cross-reference{ margin-top:0px;}
		

/* Footer */
#footer{
	clear:both;
	margin-left:85px;
	margin-right:15px;
	padding:10px 0 6px 3px;
	border-top:1px solid #c2c2c2;
	}
	#footer .copyright{ 	color:#666; }
	.footerlinks{ float:right; }
		.footerlinks li{
			float:left;
			margin-left:10px;
			}


/*---------------------*/
/* Global Elements     */
/*---------------------*/
body{
	text-align:left;
	font-size:12px;
	font-family:"Trebuchet MS", Arial, Sans;
	line-height:14px;
	color:#333;
	}
h1{
	padding-bottom:14px;
	font-size:24px;
	line-height:24px;
	font-weight:normal;
	color:#015;
	}
	h1 .subtitle{
		display:block;
		padding-top:2px;
		font-size:14px;
		font-weight:normal;
		}
h2{
	font-size:12px;
	font-weight:normal;
	}
a{ color:#666; }
input{
	font-size:12px;
	line-height:12px;	
	font-family:"Trebuchet MS", Arial, Sans;
	}
p{ margin-bottom:7px; }
p.pure{ 
	margin:0; 
	padding:0; 
	}
p.big{ 
	margin-top:7px; 
	margin-bottom:17px; 
	}
	
/*  A link with an arrow on the left */
a.cross-reference,
#subject a.cross-reference{
	padding-left:8px;
	background:url(../images/layout/cross-reference.png) no-repeat 0 6px;
	color:#666;
	}
	a.cross-reference:hover,
	#subject a.cross-reference:hover{
		color:#1af;
		text-decoration:none;
		}
		
		
/*  A link with an leftarrow on the left */
a.back-reference{
	padding-left:8px;
	background:url(../images/layout/back-reference.png) no-repeat 0 6px;
	}
	a.back-reference:hover{ color:#1af; }	
	
/* 
	Round search form fields 
	plz define the width of the "searchfield" AND 
	".searchfield input.textfield" in specific position, 
	in an other CSS file
*/
.searchfield{
	position:relative;
	height:18px;
	background:url(../images/layout/input-bg.png) no-repeat top left;
	}
	.searchfield input.text{
		margin-left:10px;
		border:0;
		font-size:12px;
		font-family:"Trebuchet MS", Arial, Sans;
		background:transparent;
		color:#9d9d9d;
		}
	.searchfield button.submit{
		position:absolute;
		right:0;
		top:0;
		border:0;
		width:19px;
		height:18px;
		background:url(../images/layout/search-bg.png) no-repeat top left;
		text-indent:-9999px;
		overflow:hidden;
		}
		* html .searchfield button.submit{ right:-1px; }
	.searchfield button.submit:hover{ background-position:bottom left; }
		* html .searchfield button.hover{ background-position:bottom left; }			
			
/* Standardbutton with an arrow on the right */
.standardbutton{
	position:relative;
	float:left;
	margin-right:18px;
	height:18px;
	background:url(../images/layout/standardbutton.png) no-repeat 0 0;
	}
	.standardbutton span{
		position:relative;
		display:block;
		float:left;
		left:12px;
		padding-right:18px;
		padding-top:2px;
		height:16px;
		background:url(../images/layout/standardbutton.png) no-repeat 100% 0;
		cursor:pointer;
		color:#666;
		}
		/** html .standardbutton span{ height:18px;  }*/
	.standardbutton:hover,
	.standarbutton-hover{
		text-decoration:none !important;
		background-position:0 -50px;
		}
		.standardbutton:hover span,
		.standardbutton-hover span{
			background-position:100% -50px;
			color:#fff;
			}	
.standardbutton-back,
.standardbutton-back span{
	background-image:url(../images/layout/standardbutton-back.png);
	}		
	.standardbutton-back span{
		padding-right:10px;
		padding-left:8px;
		}			
			
/* Some contents are iframed so here are the rulez */
iframe, .iframe{
	border:0;
	outline:0;
	overflow:hidden;
}