/* -------------------------------------------------------------------- */
/* CSS for browser L&F of Tibet-Insitut Rikon, www.tibet-institut.ch 	*/
/* 									*/
/* Change History:							*/
/* 									*/
/* 									*/
/* 29 Sep 2006: created by Carsten Nebel, based on graphical design 	*/
/*		from Karin Hutter, karin DOT hutter AT bluewin DOT ch 	*/
/*		Tested on WinXP: IE6, Firefox 1.5.0.6, Opera 8.5.1	*/
/* 		Tested on Mac OS X: Safari, Firefox 			*/
/* 									*/
/* -------------------------------------------------------------------- */


body {
	color:black;
	background:white url("../image/menu_background.gif") repeat-y; /* = workaround, (#E7E7EF) because it's difficult to get the grey menu-bar to always have the same height as the content (100% height does not work on IE) */
	background-position: 40px;
	font-size:12px;
	font-family:verdana, arial, sans-serif; 
	font-weight:normal; 
	line-height:140%;
	margin:0px;
	padding:0px;
}


/* ---------- */
/* Main Aread */
/* ---------- */

.header {
	background:white;
	padding:0px;
	height:140px;
	width:100%;
} 


.menu {
	color:#911436;
	position:absolute;
	line-height:130%;
	left:40px;
	top:170px;
	width:160px; 
	padding:0px;
} 


.content{
	position:absolute;
	top:170px;
	left:240px;
	width:560px;
} 


.footer {
	 color: #000000;
	 background:white;
	 border-top:1px solid #911436;
	 font-size:0.8em;
	 text-align:right;
	 margin:30px 0px;
	 padding-top:5px;
	 white-space:nowrap;
	 margin-bottom:0px;
 }
 


/* -------------- */
/* Header details */
/* -------------- */


.header-background-lower {
	height:80px;
	position:absolute;
	left:0px;
	top:60px;
	width:100%; 
	background:#911436;
	z-index:1; /* necessary to make sure the logo and pictures are visible */
}


.header-logo-picture {
	height:122px;
	position:absolute;
	left:40px;
	top:-1px;
	border:none;
	z-index:1000; /* logo should always be top, therefore ridiculously high z-index*/
} 


.header-picture-left {
	height:80px;
	position:absolute;
	left:240px;
	top:60px;
	z-index:3;
}


.header-picture-360 {
	height:80px;
	position:absolute;
	left:360px;
	top:60px;
	z-index:3;
}

.header-picture-360 {
	height:80px;
	position:absolute;
	left:360px;
	top:60px;
	z-index:3;
}

.header-picture-400 {
	height:80px;
	position:absolute;
	left:400px;
	top:60px;
	z-index:3;
}

.header-picture-440 {
	height:80px;
	position:absolute;
	left:440px;
	top:60px;
	z-index:3;
}

.header-picture-480 {
	height:80px;
	position:absolute;
	left:480px;
	top:60px;
	z-index:3;
}

.header-picture-520 {
	height:80px;
	position:absolute;
	left:520px;
	top:60px;
	z-index:3;
}

.header-picture-640 {
	height:80px;
	position:absolute;
	left:640px;
	top:60px;
	z-index:3;
}

.header-picture-680 {
	height:80px;
	position:absolute;
	left:680px;
	top:60px;
	z-index:3;
}

.header-picture-720 {
	height:80px;
	position:absolute;
	left:720px;
	top:60px;
	z-index:3;
}



.header-logo-science-meets-dharma { /* special class required because the logo is higher than the background, it overlaps and needs special positioning */
	height:102px;
	position:absolute;
	left:480px;
	top:52px;
	overflow:visible;
	z-index:3;
}


.header a {
	text-decoration:none;
	color: black;
	margin-left: 12px;
}


.header .selected, a:hover {
	color: #911436;
}


#meta-navigation ul {
	position:absolute;
	white-space: nowrap;
	margin-left: 212px; /* must use margin-left instead of left, because IE interprets it differently. it should actually start at 240, but we missing meta-navigation makes it hard to calculate. */
	margin-top: 20px;
	padding-left: 0;
	display: inline;
	
} 


#meta-navigation ul li {
	margin-left: 0;
	padding: 4px 16px;
	border-left: 1px solid #911436;
	list-style: none;
	display: inline;
	vertical-align:middle;
}
	
		
#meta-navigation ul li.first {
	margin-left: 0;
	border-left: none;
	list-style: none;
	display: inline;
}


	
.print-header {
	display:none; /* do not display the special header that is used when printing */
} 



/* --------------- */
/*   Menu details  */
/* --------------- */

.menu ul {
	list-style: none;
	margin: 0px;
	padding-left: 10px;

}


.menu ul li {
	border-top:1px solid #911436;
	padding-top:2px;
	padding-bottom:2px;
}


.menu ul li .selected { /* Makes the selected menu item with red colour */
	color: #911436;
	padding-left:0px;
	border-bottom:none;
}


.menu ul ul {
	padding-left:17px;
	list-style-type: square;

}


.menu ul ul li {
	border-top: none; /* no separator line for children or grandchildren */
	padding-top:1px;
	color:#E7E7EF; /* Hack to suppress the red square, same colour as menu background image */


}


.menu ul li a { 
	padding-left:0px;
	border-bottom:none;
	margin-left:0px;
	text-decoration:none;
	color:black;
}

.menu ul li a:hover { 
	color:#911436;
}


.menu .bullet { /* selected child or grandchild with bullet */
	color: #911436;
}


.menu-bottom {
	border-bottom:1px solid #911436; /* Make a border below the last parent menu item. IE6 does not support li:last-child */
} 


.menu .menu-tibetan {
	border:0px;
	margin-bottom:-4px;
}	


/* --------------- */
/* Content details */
/* --------------- */

.content h1 {	
	display:inline; /* inline necessary to have the print button on the same line */
	font-size: 18px;
	color: #911436;
	line-height:115%;
}

category {	
	display:inline; /* inline necessary to have the print button on the same line */
	font-size: 18px;
	color: #911436;
	margin-bottom:30px;
}



.content h2 {	
	margin-top: 25px;
	margin-bottom:-2px;
	font-weight:bold;
	font-size: 14px;
}


.content a {
	color: #911436;
}

.content a:visited {
	color: #BA7A1E;
}

.content img {
	margin-top:3px; /* just for backward compatibility, should use img-right instead */
	margin-left:10px;
	margin-bottom:5px;
}

.content .img-right {
	margin-top:3px; /* otherwise it looks as if the text starts vertically below the image */
	margin-left:10px;
	margin-bottom:5px;
}

.content .img-left {
	margin-top:3px; /* otherwise it looks as if the text starts vertically below the image */
	margin-left:0px;
	margin-right:15px;
	margin-bottom:5px;
}

.content ul li {
	margin-top:8px;
}

.content ul {
	margin-left:20px;
}

.lineBelow, .lineImageBelow { 
        color: #000000; 
        border-bottom:1px solid #911436; 
        margin:10px 0; 
        padding-bottom:10px; 
 } 
  
 .lineImageBelow { 
        min-height:220px;       /* if there is an image but only a short text, the line should start only below the image */

        padding-top:12px; 
 } 

 * html .lineImageBelow {
 	height:220px; /* nur für IE 5.5 - 6.x */
 } 
 
 html + body .lineImageBelow {
 	height:220px; /* nur vom IE 5.0 */
 } 

.line, .lineImage {
	color: #000000;
	border-top:1px solid #911436;
	margin:10px 0;
	padding-bottom:10px;
 }
 
 .lineImage {
	min-height:220px;	/* if there is an image but only a short text, the line should start only below the image */
	padding-top:12px;
 }
 
 * html .lineImage {
 	height:220px; /* nur für IE 5.5 - 6.x */
 } 
 
 html + body .lineImage {
 	height:220px; /* nur vom IE 5.0 */
 } 

 
 .bold {
 	font-weight:bold; 
 }


.button-print {
	position:absolute;
	right:0px;
	top:0px; /* top necessary to be vertical-aligned with h1 title. It's not very exact, just guesswork. */
	border:none;
} 

 .event-presenter {
 	margin-bottom:10px;
  }

 .event-title {
 	font-weight:bold;
 	margin-bottom:10px;
 }

.event-table {
	font-size:12px;
	font-family:verdana, arial, sans-serif; 
	vertical-align:top;
	border:0;
	margin-left:-17px; /* padding between cells, in order to start table left-aligned with text. should be same value as .event-table td padding-left -2. -2 is to make it nicely aligned with text of event. */
}

.event-table td {
	vertical-align:top;
	padding-left:15px; /* padding between cells, should be same value as margin-left of .event-table */ 

}

.shop-detail h1 {	
	display:inline; /* inline necessary to have the print button on the same line */
	font-size: 18px;
	color: #911436;
}

.shop-list-of-ordered {
	font-family:verdana, arial, sans-serif; 
	font-size:11px;
	background:white;
	border:none;
}

.borderSpecial {
	border:1px solid #808080;
	padding-left:2px;
}

.img tibetan-text {	
	margin:0px;
	margin-top:15px;
}

@font-face {
    font-family: TIRTibFont;
    src: url('himalaya.ttf');
	}
	
.tib {
		  text-align: left;
		  font-family: TIRTibFont,tsarma,tenzin;
			
		 font-variant: normal;
		  font-weight: normal;
		  font-size: 230%;
		  line-height: 1.3;
		  font-size-adjust: none;
		  font-stretch: normal;
		  font-style: normal;
}

.tib A {text-decoration:none}

			

/* --------------- */
/* Footer details */
/* --------------- */


.footer a {
	text-decoration:none;
	vertical-align:top;
}
 

.footer span {  /* makes it possible to have left and right aligned text on the same line */
	float:left;
	width:5em;
	text-align:left;
}