/*	-------------------------------------------------------------
 
	Copyright Convecto New Media GmbH, Frankfurt, Germany
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

/*	-------------------------------------------------------------
	IMPORT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

@import url("/DesktopModules/Convecto/Styles/Article/css/jquery.fancybox-1.3.1.css");


/*	-------------------------------------------------------------
	ARTICLE EDIT 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.article-actions
{
	clear: both;
	display: block;
	height: 16px;
	margin: 5px 0 10px 0;
}

.teaser-edit-icon
{
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	padding: 0 10px 0 0;
}

.article-edit-icon
{
	display: block;
	width: 16px;
	height: 16px;
	padding: 5px 10px 5px 0;
}

.article_locked
{
	clear: both;
	margin: 4px 0 12px 0;
	padding: 0 0 0 20px;
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url(/DesktopModules/Convecto/Styles/Article/img/Icons/lock.png);
}


/*	-------------------------------------------------------------
	ARTICLE CORE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.article
{
	padding: 0;
	margin: 0 0 0.5em 0;
}

.article ol, .article ul
{
    list-style: square;
    line-height: 1.5em;
    padding-left: 15px;
    margin: 0 0 1.5em 0;
}

.article h2
{
    margin-bottom: 0.5em;
}


/*	-------------------------------------------------------------
	ARTICLE IMAGE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.article-image
{
    position: relative;
    top: 4px;
    display: block;
    overflow: hidden;
}

.article-image a
{
    position: relative;
    z-index: 0;
    display: block;
    padding: 4px;
    margin-bottom: 5px;
    border: 1px solid #ced3d8;
    background-color: #fafafa;
    overflow: hidden;
}

.article-image a:hover
{
    border-color:  #cbdeec;
}

.article-image img
{
    border: 0;
    overflow: hidden;
}

.article-image img:hover
{
    filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

.image-left
{
    float: left;
    margin: 0 20px 0.5em 0;
}

.image-right
{
    float: right;
    margin: 0 0 0.5em 20px;
}

.image-center
{
    display: block;
    width: 100%;
    margin: 0.5em 0 0.5em 0;
}


/* IE6 only */
.image-zoom
{
    clear: both;
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 10;
    bottom: 10px;
    right: 10px;
}

.article-image .caption
{
    display: block;
    padding: 0 0 5px 0;
    font-size: 0.9em;
    line-height: 1em;
}

/*	-------------------------------------------------------------
	ARTICLE RESOURCES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.article-resources
{
    clear: both;
    display: block;
    margin: 0 0 1em 0;
    background-image: url('/DesktopModules/Convecto/Styles/Article/img/line-horizontal-dotted.gif');
	background-repeat: repeat-x;
	background-position: top;
}

.article-resources h5
{
    color: #000;
    padding: 0.5em 0 0.25em 0;
}

.article-resources a
{
    display: block;
    padding: 0.25em 0 0.25em 19px;
    background: no-repeat center left;
}


/*	-------------------------------------------------------------
	TEASER DEFAULT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.teaser
{
    display: block;
    clear: both;
    padding-bottom: 1em;
}

.teaser p
{
    margin-bottom: 12px;
}

.teaser-date
{
	font-size: 0.769em;
	font-weight: bold;
	color: #838383;
	margin: 0;
	padding: 0;
}

.teaser-image
{
    position: relative;
    top: -1px;
    float: left;
    border: 1px solid #e6ecf1;
    background-color: #e6ecf1;
    padding: 4px;
    margin: 0 20px 0 0;
}

.teaser-image:hover
{
    border-color:  #5598ca;
}

.teaser-image img
{
    -ms-interpolation-mode: bicubic;
	overflow: hidden;
}

.teaser-image img:hover
{
    filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

.morelink
{
    clear: both;
    float: right;
    margin-top: 0.5em;
    display: block;
    width: 40px;
    height: 15px;
    font-size: 8px;
    text-align: center;
    text-indent: -5000px;
    background-image: url('/DesktopModules/Convecto/Styles/Article/img/bg-morelink.gif');
	background-repeat: no-repeat;
}

.morelink:hover
{
    background-position: left -15px;
}

.article-backlink
{
    clear: both;
    padding: 0.5em 0 0.5em 0;
    background-image: url('/DesktopModules/Convecto/Styles/Article/img/line-horizontal-dotted.gif');
	background-repeat: repeat-x;
}

.arrow-right-white
{
    padding-left: 16px; 
    background-image: url('/DesktopModules/Convecto/Styles/Article/img/arrow-right-white.gif');
	background-repeat: no-repeat;
	background-position: left 0;
}

.arrow-right-white-external
{
    padding-left: 16px; 
    background-image: url('/DesktopModules/Convecto/Styles/Article/img/arrow-right-white-external.gif');
	background-repeat: no-repeat;
	background-position: left 0;
}

.mail-white
{
    padding-left: 16px; 
    background-image: url('/DesktopModules/Convecto/Styles/Article/img/mail-white.gif');
	background-repeat: no-repeat;
	background-position: left 0;
}

.arrow-right
{
    padding-left: 16px; 
    background-image: url('/DesktopModules/Convecto/Styles/Article/img/arrow-right.gif');
	background-repeat: no-repeat;
	background-position: left 0;
}

.arrow-left
{
    padding-left: 16px; 
    background-image: url('/DesktopModules/Convecto/Styles/Article/img/arrow-left.gif');
	background-repeat: no-repeat;
	background-position: left 0;
}

.rss-icon
{
    clear: both;
    display: none;
    float: right;
    width: 16px;
    height: 16px;
    margin: 0 0 1em 0;
}


/*	-------------------------------------------------------------
	TEASER BOX COMMON
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.teaser-box
{
    float: left;
    margin: 0 20px 2.5em 0;
}

.teaser-box-image
{
    display: block;
    padding: 4px;
    border: 1px solid #ced3d8;
    background-color: #fafafa;
    margin: 0 0 1em 0;
    overflow: hidden;
}

.teaser-box-image:hover
{
    border-color:  #cbdeec;
}

.teaser-box-image img
{
    -ms-interpolation-mode: bicubic;
	overflow: hidden;
}

.teaser-box-image img:hover
{

}


/*	-------------------------------------------------------------
	TEASER BOX2
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.teaser-box2-list
{
    width: 560px;
}

.teaser-box2
{
    width: 260px;
    overflow: visible;
}

.box2-image
{
    height: 330px;
}

html>body .box2-image
{
    height: auto;
    min-height: 330px;
}

.box2-noimage
{
    height: 220px;
}

html>body .box2-noimage
{
    height: auto;
    min-height: 220px;
}

.teaser-box2-image
{
    width: 250px;
    height: 130px;
    overflow: hidden;
}

.teaser-box2-image img
{
    height: 130px;
}

html>body .teaser-box2-image img
{
    height: auto;
    min-height: 130px;
}

.teaser-box2-image span
{
    display: block; 
    width: 250px;
    height: 130px;
    overflow: hidden;
}


/*	-------------------------------------------------------------
	TEASER BOX3
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.grid_12 .teaser-box3-list
{
    width: 960px;
}

.grid_8 .teaser-box3-list
{
    width: 640px;
}

.grid_4 .teaser-box3-list
{
    width: 320px;
}

.teaser-box3
{
    width: 300px;
}

.teaser-box3-image
{
    width: 290px;
}


/*	-------------------------------------------------------------
	TEASER SLIDER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 940px; 
    height:410px; 
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left; 
} 
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}

.prevPage, .nextPage
{
	text-indent: -9999px;
	display: block;
	float: left;
	width: 25px;
	height: 25px;
	background-image: url('/DesktopModules/Convecto/Styles/Article/img/bg-jflow-button.png');
	background-repeat: no-repeat;
	overflow: hidden;
}

.nextPage
{
	background-position: 0 -25px;
}

.disabled
{
    display: none;
}

.navi
{
    clear: both;
    margin: 0 0 1em 0;
    height: 8px;
}

.navi a
{
    display: block;
    float: left;
    width: 8px;
    height: 8px;
    margin: 0 5px 0 0;
    background-image: url('/DesktopModules/Convecto/Styles/Article/img/navigator.png');
	background-repeat: no-repeat;
	overflow: hidden;
}

.navi a:hover
{
    background-position: 0 -8px;
}

.navi a.active
{
    background-position: 0 -16px;
}


/*	-------------------------------------------------------------
	TEASER TABS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.tabnews
{
    background-image: url('/DesktopModules/Convecto/Styles/Article/img/line-horizontal-dotted.gif');
	background-repeat: repeat-x;
	background-position: left bottom;
	margin-bottom: 8px;
}

.tabnews h2
{
    font-size: 1em;
    color: #177b2f;
    margin: 0;
    line-height: 1.5em;
    font-weight: bold;
}

.tabnews p
{
    margin: 0;
    padding: 0;
}


/*	-------------------------------------------------------------
	NEWS BOX RIGHT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.news-box-right
{    
    border-bottom: 1px solid #77bcee;
}

/*	-------------------------------------------------------------
	OTHER JQUERY STYLES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

/* JQuery Biggerlink */

/* clickable element */
.hot 
{
	zoom: 1; /* Should be IE only */
}

/* rollover style for clickable element */
.hover
{
	cursor: pointer;
}

.hover .teaser-image, .hover .teaser-box-image
{
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
	border-color:  #cbdeec;
}

.hover .morelink
{
    background-position: left -15px;
}