@import "forms.css";
/*@import "container.css"; */

/**
 * Headlines 
 */
h1 {
	padding: .25em 0 .75em 0;
	color: #1B1F35;
	font-size: 34px;
	font-weight: bold; 
	font-family: 'Oswald', sans-serif;
	letter-spacing: .015em;
} 
h2 {
	padding: 1em 0;
    color: #BA0000;
    font-size: 16px;
    font-weight: bold;      
	font-family: Arial, Verdana, Helvetica, sans-serif;
} 
h2.imp {
	padding: 1em 0 1.2em 0;
	color: #1B1F35;
	font-size: 20px; 
	font-family: 'Oswald', sans-serif;
	letter-spacing: .015em;
} 
h3 {
	padding: 10px 0 5px 0;
	color: #666666;
	font-size: 14px;
	font-weight: bold;
}
h4 {
	padding: 10px 0 4px 0;
	color: #666666;
	font-size: 12px;
	font-weight: bold;
}

.htmlText {
	padding-bottom: 0px;
	margin-bottom: 20px; 
}
.htmlText p {
	padding: 6px 0 10px 0;
	margin: 0;
	line-height: inherit;        
}
/**
 * OBJECT: download link 
 */
#mainCol .downloadLink {
	margin: 5px 0 20px 0;
}
#mainCol .downloadLink .icon {
	float: left; 
	width: 50px; 
	margin-right: 10px;
	text-align: center;
	overflow: hidden;
}
#mainCol .downloadLink .descCont {
	float: left;              
	width: 430px;
}
#mainCol .downloadLink h4 {
	font-weight: bold;
	font-size: 12px;
	color: #454545;
}
#mainCol .downloadLink h4 a, #mainCol .downloadLink h4 a:visited {
	color: #454545;
}


/** ******************************************************** **
 *   IMAGES / IMAGES WITH TEXT 
 ** ******************************************************** **/
/**
 * img left/right aligned. 
 *  problem: not knowing the img width, the subtitle might stretch the whole div!  
 **/
.imgRightAlignedWithText {
	padding: 5px 0 10px 0; 
}
.imgRightAlignedWithText .image {
	float: right;
	padding: 3px;
	margin: 0 0 8px 15px;
}
.imgRightAlignedWithText .image .subtitle {
	padding-top: 3px;
	font-size: 11px;
	color: #666666;
	text-align: center;
}
.imgLeftAlignedWithText {
	padding: 5px 0 10px 0; 
	text-align: left;
}
.imgLeftAlignedWithText .image {
	float: left; 
	padding: 3px;
	margin: 0 15px 8px 0;
}
.imgLeftAlignedWithText .image .subtitle {
	padding-top: 3px;
	font-size: 11px;
	color: #666666;
	text-align: center;
}
/**
 * new solution - as well used for event pics 
 */
.floatpic-right {
    float: right;
    margin: 10px 0 15px 15px;
}


.image1 {
	margin: 15px 0 15px 0;
	/**border: #666666 1px solid;*/
	padding: 3px;
	text-align: center;
}   
.image1 .border-grey img {
	border: #999999 1px solid;
	padding: 5px;
}
.image1 .subtitle {
 	padding-top: 0px;  
	font-size: 11px;
	color: #666666;
}
#rightCol .image1 .subtitle {
	text-align: center;
}  

/**
 * 2 images beside eo
 *  style1: as table (subtits same position)
 *	style2: as divs (subtit right below pic)  
 */
.image2 {
	margin: 5px 0 15px 0;
}
table.image2 {
	width: 100%;
	border: 0;
}
table.image2 tr td.left {
	padding: 0 5px 2px 0;
}
table.image2 tr td.right {
	padding: 0 0 2px 5px;
	text-align: right;
}
.image2 div.left, .image2 div.right {
	float: left;  
	width: 240px;
	text-align: center;
}
.image2 div.left {
	margin-right: 10px;
}
.image2 .subtitle {
	font-size: 11px;
	color: #666633;
}


.image3 {
	margin: 0;
}
.image3 div.imgFrame  {
	display: inline;
	padding: 0;
	margin: 0;
}
.image3 div.imgFrame img  {
	padding: 0;
	margin: 0;
	border: 0;
}
.image3 div.subtitle {
	padding: 5px;
	font-size: 11px;
	color: #666633;
}

/**
 * Distance 
 */
.distance {
  	height: 15px;
  	overflow: hidden;
	clear: both;
}

/**
 * OBJECT: separator
 * horizontal separator with 3 different styles ! 
 */
.separator {
}
.separator .style1, .separator .style3 {
	height:  6px;
	/*overflow: hidden;*/ 
} 
.separator .style1, .separator .style2 {  
	margin: 5px 0;   
}
.separator .style3 { 
	margin: 0;  
}
#mainCol .separator .style1, #mainCol .separator .style2 { 
	margin: 10px 0;
}
/*
.separator .style1 {
	background: url(/images/objects/separator/bg_style1.gif) left center repeat-x;
}
.separator .style2 {
	background: url(/images/objects/separator/bg_style2.gif) left center repeat-x;
}
.separator .style3 {
	background: url(/images/objects/separator/bg_style3.png) center center no-repeat;
}
*/


/* ***************************************************************** *
 *   IMAGE GALLERY (THUMBS LIST)
 * ***************************************************************** */ 
/**
 * div containing images opened in lightbox 
 */
.mainArea .imgGallery {
  	margin: 10px 0;
	padding: 10px 0;
}
.mainArea .imgGallery table.gallery-thumbs {
  	width: 100%;
	border: 0;
}
.mainArea .imgGallery td.gallery-pic {
  	width: 33%;
	padding: 1px;
	text-align: center;
}
.mainArea .imgGallery .gallery-picwrap {
	width: 180px;
	height: 140px;
	margin: 5px auto;
	padding: 5px;
	overflow: hidden;
	background: #F9F9F9;
	text-align: center;
	voice-family: "\"}\""; 
	voice-family: inherit;                                       
	width: 170px;
	height: 130px;
}
html>body .mainArea .imgGallery .gallery-picwrap {
	width: 170px;
	height: 130px;
}
.mainArea .imgGallery .gallery-picwrap div.desc {
	height: 25px;  
	overflow: hidden;
	font-size: 11px;
	color: #666666;
}
/*
.mainArea .imgGallerySingleLine {
	width: 644px;
	overflow: auto;	
	overflow-x: auto;
  	overflow-y: hidden; 
}
.mainArea .imgGallerySingleLine .sep {
	margin: 10px 0;
	height: 2px;
	overflow: hidden;
	background: url(/images/objects/imgGallery/sep.png) center center no-repeat;
}
.mainArea .imgGallerySingleLine table.thumbs {
	width: 100%;
	border: 0;	
}
.mainArea .imgGallerySingleLine table.thumbs tr {
	text-align: center;
}
*/


/** *************************************************************************** **
 *   CUSTOM (NON GENERIC) OBJECTS 
 ** *************************************************************************** **/



/** *************************************************************************** **
 *   CONTAINER  
 ** *************************************************************************** **/

/** 
 * Basic listing 1: used for articles (.articleList) and event list (.eventList)
 */
.article-list { }
.article-list .item { margin-bottom: 30px; }
.article-list .item-with-pic .item-image, .article-list .item-with-pic .item-text { float: left; }
.article-list .item-with-pic .item-text { width: 460px; }
.lyt-2col-230 .sub-right .article-list .item-with-pic .item-text { width: 245px; }
.lyt-2col-230 .sub-right .lyt-borders .article-list .item-with-pic .item-text { width: 222px; }
.article-list .item .item-image { width: 200px; height: 125px; margin: 0 15px 5px 0; }
.article-list .item .image-wrap { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; }
.article-list .item .image-wrap img { width: 100%; height: 100%; }
.article-list h3 { padding: 0; margin-bottom: 0; color: #BA0000; font-size: 14px; line-height: 1.2em; } 
.article-list h3 a { color: #BA0000; text-decoration: none; } 
.article-list h3 a:hover { text-decoration: underline; } 
.article-list .intro { line-height: 1.3em; } 
.article-list .intro p { margin-top: 0; } 


/**
 * Events listing homepage / box 
 */
.rightCol .eventList { border-top: 1px solid #ECEBEB; }
.rightCol .eventList .item {
    position: relative;
    height: 58px;
    background: url(../images/content/calBox_item_bg.jpg) no-repeat;
    overflow: hidden;
}
.rightCol .eventList .item-hover { cursor: pointer; }
.rightCol .eventList .item > div { position: absolute; overflow: hidden; font-size: 12px; line-height: 1em; }
.rightCol .eventList .bullet { 
    width: 11px; 
    height: 12px; 
    top: 6px;
    left: 6px;
    background: url(../images/content/calBox_item_bullet.png) no-repeat; 
}
.rightCol .eventList .item-hover .bullet { background-image: url(../images/content/calBox_item_bullet1.png); }
.rightCol .eventList .line-date-loc { 
    width: 195px;
    height: 16px;
    top: 6px;
    left: 24px;
    color: #878686;
}
.rightCol .eventList .line-title { 
    width: 195px;
    height: 16px;
    top: 22px;
    left: 24px;
    color: #333333;
}
.rightCol .eventList .line-title a { color: #333333; text-decoration: none; }
.rightCol .eventList .item-hover .line-title a { color: #000; text-decoration: underline; }
.rightCol .eventList .item .line-subtitle { 
    width: 195px;
    height: 16px;
    top: 38px;
    left: 24px;
    color: #878686;
    font-size: 11px;
}

/** *************************************************************************** **
 *   EVENT DETAILS - NO OBJECT  
 ** *************************************************************************** **/

.eventDetails h2.subline { margin-top: 0; }