/*
	
	This CSS file contains the base style properties used
	by Finnojet. To add a new CICD or to change colors / 
	border styles, please configure the custom.css.
	
	The CSS contains style properties for HTML tags, ids and classes in this
	order.
	
	Classes and part description have the schema:
	Keyword:
	Summary:
	Used in:
	Comments:
	
	'Nested inside' means that a class will inherit the attributes of the
	surrounding class.
*/


/*
   ===============================================================================
   HTML Styles
  
   This part is described here globally:
   Keyword:		HTML tag styles
   Summary:		Global setting of style properties of HTML tags
   Used in:		All pages
   Comments:	These styles overwrite the styles of browser and user
   ===============================================================================
 */
 

form {
	margin: 0px;
	padding: 0px
}

input {
	text-align: left; 
	width: 236px; 
	height: 14px;
}

select {
	width: 370px; 
	height: 18px
}

ul {
	margin-top: 0px;
	margin-bottom: 0px;
}


/*
   ===============================================================================
   ID Styles
  
   Styles defined by element id (an id must occur only once in a page).
   Ex.: <div id="stylename">
   ===============================================================================
 */

/* ========== Main layout divisions(div) ==========
   This part is described here globally. Each style has a short description of
   its layout part.
   Keyword:		Main layout blocks
   Summary:		The id styles are actually exclusively used for blocks of the
  				master layout
   Used in:		All pages
   Comments:	Blocks are structured with the DIV tag.
*/


/*
	Summary:	Part containing logo image identifying the bank
*/
#log {
	position: absolute;
	width: 125px;
	height: 25px;
	top: 5px;
	left: 4px;
}

/*
	Summary:	Navigation menu part
	Comments:	Entries themselves have their own classes: see classes '.nav_'.
*/
#nav {
	width: 206px;
	position: absolute;
	top: 166px;
	left: 0px;
	float: left;	  	
}

/*
	Summary:	Header part
*/
#hea {
	position: absolute;
	top: 100px;
	width: 984px;
	height: 21px;
}

/*
	Summary:	Services part
*/
#ser {
	position: absolute;
	z-index: 500;
	width: 984px;
	top: 132px;
	height: 30px;
}

/*
	Summary:	Left service part
	Comments:	Nested inside is '#ser'
*/
#ser_left {
	width: 864px;
	float: left;
}

/*
	Summary:	Right service part
	Comments:	Nested inside is '#ser'
*/
#ser_right {
	width: 117px;
	float: right;
}

/*
	Summary:	Contents part
*/
#con {
	position: absolute;
	top: 166px;
	left: 208px;
	width: 780px;
}

/*
	Summary:	Inner contents part
	Comments:	Nested inside is '#con'
*/
#con_broad {
	width: 768px;
	position:relative;
}

/*
	Summary:	Footer margin part, space between content and footer
	Comments:	Nested inside is '#con'
*/
#foo_margin {
	height: 4px;
	width: 780px;
}

/*
	Summary:	Footer part
	Comments:	Nested inside is '#con'
*/
#foo {
	height: 21px;
	width: 780px;
}

/*
	Summary:	Left footer part
	Comments:	Nested inside is '#foo'
*/
#foo_left {
	width: 625px;
	margin-right: 1px;
	float: left;
}

/*
	Summary:	Right footer part
	Comments:	Nested inside is '#foo'
*/
#foo_right {
	width: 154px;
	float: right;
}




/* ========== Contents (".con_") ==========
   Content classes. The most are used in several pages.
   The ones used only in a specific page are grouped together.
   A few special styles are grouped in at the end of the CSS under "Specials".
*/

/* ---------- Content widths ----------
   Keyword:		Content widths
   Summary:		Main contents widths
   Used in:		All pages
   Comments:	
*/

.con_width_broad {
	width: 768px;
}

.con_width_narrow_left {
	width: 613px;
}

.con_width_narrow_right {
	width: 155px;
}



/* ---------- Input field sizes (".con_input_") ----------
   Keyword:		Input field sizes
   Summary:		
   Used in:		Some pages
   Comments:	To get right size of text input fields and text areas under IE
   				use the style with extension "_text". IE renders theses sizes 4
   				pixels to big.
*/

.con_input {
	width: 236px; 
}

.con_input_text {
	width: 232px; 
}

.con_input_middle {
	width: 146px; 
}

.con_input_middle_text {
	width: 142px; 
}

.con_input_zv_rg {
	width: 262px;
}

/*
	ade 20070718 hack for IE6&7 on IPI page. For some reason, IE will break the
	layout unless this text field is more than the normal 4px smaller than the
	td...
	Changed from 258px to 254px.
	RG payment also uses this class but change should be visually unnoticeable.
*/
.con_input_zv_rg_text {
	width: 254px;
}

.con_input_booking {
	width: 258px;
}

.con_input_booking_text {
	width: 254px;
}

.con_input_pn_amount {
	width: 79px;
}

.con_input_pn_amount_text {
	width: 75px;
}

.con_input_pn_limit_text {
	width: 94px;
}

.con_input_date {
	width: 79px;
}

.con_input_date_text {
	width: 75px;
}

.con_input_amount {
	width: 99px;	
}

.con_input_amount_text {
	width: 95px;
}

.con_input_zv_post_adr {
	width: 258px;
}

.con_input_zv_post_adr_text {
	width: 254px;
}

.con_input_zv_post_plz {
	width: 40px;
}

.con_input_zv_post_plz_text {
	width: 36px;
}

.con_input_zv_post_city {
	width: 216px;
}

.con_input_zv_post_city_text {
	width: 212px;
}

.con_input_zv_post_amt_text {
	width: 140px;
}

.con_input_pwd {
	width: 184px;
}

.con_input_pwd_text {
	width: 180px;
}

.con_input_iban {
	width: 250px;
}

.con_input_iban_text {
	width: 246px;
}

.con_input_plz {
	width: 79px;
}

.con_input_plz_text {
	width: 75px;
}

.con_input_rec_scanner_text {
	width: 366px;
}

.con_input_align_amount {
	text-align: right;
}


/* ---------- Selection box sizes (".con_select") ----------
   Keyword:		Select box sizes
   Summary:		
   Used in:		Some pages
   Comments:	
*/

.con_select {
	width: 370px; 
}

.con_select_middle {
	width: 145px; 
}

.con_select_small {
	width: 90px; 
}

.con_select_pn_month {
	width: 90px; 
}

.con_select_currency {
	width: 50px; 
}

/* Used in SMS settings to have the same width as con_input_amount */
.con_select_amount {
	width: 99px; 
}

/*
	Used in account payment. Used in combination with ".con_select_small" to set the enabled
	and disabled styles of a select box for state changes from javascript.
*/
.con_select_small_disabled {
	width: 90px; 
}

/* ---------- Input buttons ("input.con_button") ----------
   Keyword:		Input button styles
   Summary:		
   Used in:		Some pages
   Comments:	
*/

input.con_button {
	height:18px;
	width: 99px;
	text-align: center;
}

input.con_button_disabled {
	height:18px;
	width: 99px;
	text-align: center;
}

/* -- For button with too long label -- */

input.con_buttonbig {
	height:18px;
	width: 149px;
	text-align: center;
}

input.con_buttonbig_disabled {
	height:18px;
	width: 149px;
	text-align: center;
}

input.con_buttonextrabig {
    height:18px;
    width: 155px;
    text-align: center;
}

input.con_buttonextrabig_disabled {
    height:18px;
    width: 155px;
    text-align: center;
}

input.con_buttonacrosstwocolumns {
    height:18px;
    width: 360px;
    text-align: center;
}

input.con_buttonacrosstwocolumns_disabled {
    height:18px;
    width: 360px;
    text-align: center;
}

/* ---------- Text area (".con_area") ----------
   Keyword:		Text area style
   Summary:		
   Used in:		Some pages
   Comments:	
*/

.con_area {
	text-decoration: none; 
	text-align: left; 
}

/* ---------- Radio and radio cell (".con_radio") ----------
   Keyword:		Radio button table cell style
   Summary:		To have different alignments for the radio and its label a table
   				with two column was made that holds in each element in one separate
   				cell. The following classes apply to this table and the radio/label.
   Used in:		Some pages
   Comments:	Most of this classes don't have to be used directly.
   				They are applied automatically by the checkbox/radio renderer.
*/

/* This is for the cell surrounding the radio label. The label will have no sort of padding */
.con_radio_label-cell-nopadding {
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	padding-left: 4px;
}
/* This class is used when the radios are in table column and
there is no need for labels */
.con_radio_label-cell-nolabel {
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	padding-left: 0px;
}

/* -- Used in FRadioRenderer.java -- */
/* This is for the cell surrounding the radio */
.con_radio-cell {
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
}
/* This class is for the radio itself */
.con_radio {
	background-color: transparent;
	padding: 0px;
	width: 16px; 
	height: 16px;
	margin: 0px;
	margin-top: 2px;
	vertical-align: middle;
}
/* This is for the cell surrounding the checkbox label. The label will some padding on the left side */
/* Useful when the label is on the right side of the radio */
.con_radio_label-cell {
	vertical-align: middle;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 20px;
	padding-left: 4px;
}

/* ---------- Checkbox and checkbox cell (".con_checkbox") ----------
   Keyword:		Checkbox table cell style
   Summary:		To have different alignments for the checkbox and its label a table
   				with two column was made that holds in each element in one separate
   				cell. The following classes apply to this table and the checkbox/label.
   Used in:		Some pages
   Comments:	Most of this classes don't have to be used directly.
   				They are applied automatically by the checkbox/radio renderer.
*/
/* This is for the cell surrounding the checkbox label. The label will have no sort of padding */
.con_checkbox_label-cell-nopadding {
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
}

/* -- Used also in FCheckboxRenderer.java and FSelectManyCheckboxRenderer.java -- */
/* This class is for the checkbox itself */
.con_checkbox {
	background-color: transparent;
	padding: 0px;
	width: 16px; 
	height: 16px;
	margin: 0px;
	margin-top: 2px;
	vertical-align: middle;
}
/* This is for the cell surrounding the checkbox label. The label will some padding on the left side */
/* Useful when the label is on the right side of the checkbox */
.con_checkbox_label-cell {
	vertical-align: middle;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 20px;
	padding-left: 4px;
}
/* This is for the cell surrounding the checkbox */
.con_checkbox-cell {
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
}

/* ---------- Data display area (".con_display_") ----------
   Keyword:		Ebanking data display fields
   Summary:		Style elements of data display field of ebanking application
   				(ex. payment confirmation)
   Used in:		Some pages
   Comments:
*/

/* Data field value font */
.con_display_field_font {
	line-height: 16px;
}

/* Data field label font */
.con_display_label_font {
	line-height: 16px;
}


/* ----- Message box (error, info) -----
   Keyword:		Ebanking message box
   Summary:		Style elements of message boxes of ebanking application
   Used in:		Some pages
   Comments:
*/

.table-msgBox-err {
	width: 100%;
	margin-bottom: 4px;
}
.td-msgBox-err-logo {
	width: 60px;
	text-align: left;
}
.td-msgBox-err-text {
	text-align: left;
}
.table-msgBox-info {
	width: 100%;
	margin-bottom: 4px;
}
.td-msgBox-info-logo {
	width: 60px;
	text-align: left;
}
.td-msgBox-info-text {
	text-align: left;
}

/* ----- Progress indicator -----
   Keyword:		Ebanking progress indicator
   Summary:		Style elements of progress indicator of ebanking application
   Used in:		Some pages
   Comments:
*/

.table-progress {
	margin-bottom: 14px
}

.con_progress-inactive {
	line-height: 14px; 
	vertical-align: middle;
}

.con_progress-active {
	line-height: 14px; 
	vertical-align: middle;
}

.con_progress_image_padding {
	padding-right: 9px;
}


/* ----- Table pager -----
   Keyword:		Ebanking table pager
   Summary:		Style elements of table pager of ebanking application
   Used in:		Some pages
   Comments:	
*/

.td-pager-page {
	text-decoration: none;
}

.td-pager-page-numbers {
	vertical-align: middle;
}

.td-pager-selectedpage {
	text-decoration: none;
	vertical-align: middle;
}

.td-pager-image-left {
	padding-left: 120px;
	padding-right: 16px;
	vertical-align: middle;
}

.td-pager-image-right {
	padding-left: 16px;
	padding-right: 20px;
	vertical-align: middle;
}

.td-pager-separator-image {
	padding-left: 8px;
	padding-right: 8px;
	vertical-align: middle;
}

/* Class for the dots if >5 pages are found.*/
.td-pager-dots {
	vertical-align: middle;
}

/* ----- Table sorter -----
   Keyword:		Ebanking table sorter
   Summary:		Style elements of table sorter of ebanking application
   Used in:		Some pages
   Comments:	
*/

.td-sortImgAsc {
	padding-left: 5px;
	vertical-align: middle;
}
.td-sortImgDesc {
	vertical-align: middle;
}

/* ---------- Tables ----------
   Keyword:		Ebanking table
   Summary:		Style elements of table of ebanking application
   Used in:		Some pages
   Comments:	
*/

.table-layout {
	height: 375px;
}
.table-detail {
	table-layout: fixed;
	border-collapse: collapse;
	overflow: visible;
}
.td-headline {
	padding-left: 8px;
	padding-top: 30px;
	text-align: left;
	height: 21px;
}
.td-subtitle {
	padding-top: 6px;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
	text-align: left;
}
.td-header {
	padding-top: 6px;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
	text-align: left;
}
.td-detail {
	padding-top: 6px;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
	text-align: left;
}
.td-radio {
	padding-left: 8px;
	padding-right: 8px;
	vertical-align: middle;
}
/*
	Place this class in fDataDable as the last of the headerClasses to force
	right alignment for the column header. The table renderer needs this hint
	to insert an 'align="right"' for Firefox and IE6.
*/
.td-detail-right {
	text-align: right;
}
.td-last-column {
	padding-right: 20px;
}

/* ---------- Calendar ----------
   Keyword:		Ebanking calendar
   Summary:		Style elements of calendar of ebanking application
   Used in:		Some pages
   Comments:	
*/

/* Navigation*/
.tr-cal-navig {
	border-collapse: collapse;
}

/* 'Super class' for all days*/
.table-cal-days {
	border-collapse: collapse;
}

/* Weekdays (Mo Tu We...)*/
.tr-cal-weekdays {
	border-collapse: collapse;
}

/* Weekend days*/
.td-cal-weekend {
	border-collapse: collapse;
}

/* Current day*/
.font-cal-today {
	border-collapse: collapse;
}

/* Last chosen day*/
.font-cal-lastdate {
	border-collapse: collapse;
}

/* Next month's day*/
.font-cal-nextmonth {
	border-collapse: collapse;
}

/* Prev and next image*/
.img-cal {
	margin-top: 3px;
}

/* ---------- Specific pages ----------
   Keyword:		Ebanking pages
   Summary:		Style elements only used in specific pages of ebanking application
   Used in:		Specific pages
   Comments:	
*/

/* -- International payment (ezsInternationalPayment.jsp) -- */

.con_input_intpay {
	width: 164px;
}

.con_input_intpay_text {
	width: 160px;
}

.con_input_swift {
	width: 90px;
}

.con_input_swift_text {
	width: 86px;
}

.con_input_mitt {
	width: 294px;
}

.con_input_mitt_area {
	width: 245px;
	height: 54px;
	overflow: hidden;
	line-height: 14px;
}

.con_input_curr {
	width: 45px;
}

.con_input_curr_text {
	width: 41px;
}

.con_select_spesen {
	width: 276px;
}

/* -- Konto �bertrag (ezsAccountPayment.jsp) -- */

.con_accpay_col_width {
	width: 276px;
}

.con_accpay_col_width_text {
	width: 272px;
}

.con_accpay_colspc_width {
	width: 33px;
}

/* -- Depot position details (depotPosition.jsp) --
	INFO: Use style classes under 'Data display area (".con_display_")'
	instead of these to style data display areas.

	These styles have been defined originally for depot position.
	They are only used to layout the data display field. In the meantime some of them
	are also used in other pages.
	The layout of data display field should be done with the classes under
	'Data display area (".con_display_")' and the depot position details classes
	should be replaced.
*/

.con_position_detail {
	padding-top: 20px;
	padding-left: 120px;
	padding-bottom: 20px;
	padding-right: 20px;
	line-height: 16px;
}

.con_position_detail_first_col {
	width: 140px;
}

.con_position_detail_second_col {
	width: 353px;
}

.con_position_detail_row {
	height: 16px;
}

/* -- Portfolio valuation (portfolioValuation.jsp) --*/

.con_row_box {
	padding-top: 6px;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
}

/* -- Portfolio analysis (portfolioAnalysis.jsp) -- */

.con_select-custom-pfana {
	width: 240px;
}

.con_input_refnr {
	width: 294px;
}

.con_input_refnr_text {
	width: 290px;
}

/* These classes are used on the table in step 3 of the ipi payment */
.td-refnumbr-label {
	width: 150px;
}

.td-refnumbr {
	padding-left: 4px;
}

/* -- Bank payment (ezsBankPayment.jsp) -- */
.con_input_verysmall {
	width: 79px;
}

.con_input_verysmall_text {
	width: 75px;
}

.con_input_zv_bank {
	width: 258px;
}

.con_input_zv_bank_text {
	width: 254px;
}

/* -- Post payment (ezsPostPayment.jsp) -- */

.con_area_post_msg {
	width: 292px;
}

.con_area_post_msg_text {
	width: 288px;
}

/* ---------- Specials ---------- */

/*
	Style for the security (valor) information icon
*/
.con_security_info_icon {
	border: solid 0px;
}


/*
	Placeholder for class parameter of jsf tags
*/
.con_dummy {
}

/*
	Language enum on login page
*/
.td-lang-enum {
	vertical-align: middle;
}

/*
	Table class to set print header invisible
*/
.con_print-header {
	display: none;
}

/*
	File upload field style
*/
input.con_upload {
	text-decoration: none; 
	width: 295px; 
	height: 18px
}

/* 
	 Used for input text fields, here the comment found in jsf pages:
	 This input text is hidden and disabled. It's here just to please msie.
	 If one submits the form pressing the enter key (not clicking on the submit button),
	 the ie will include the name and value of the submit button only if the form contains more
	 than one input text field. Since we need the name and value of the submit
	 button to activate related actions, and this form has only one input field
	 we need en extra input field here.
 */
.con_inputdummy {
	visibility:hidden;
	display:none;
}

/* -- Table cell vertical aligning -- */
.con_valign_middle {
	vertical-align: middle;
}

.con_valign_bottom {
	vertical-align: bottom;
}

/*
	horizontal separator
*/
.con_horizontal_separator {
	border: none;
	border-bottom: none;
	border-left: none;
	border-right: none;
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #d7d8e1;
}

/*
	Hint for browsers to render empty table cells. Doesn't work for IE.
	Use ieUtils.js for IE.
*/
table { empty-cells:show; }

/*
	list of possible paynet accounts (payment-step3)
*/
ul.con_lst_paynet_accounts {
	/* here you can define your list-style*/
}

/*************** css-hover menu coding *****************/
#ser_fav ul {
list-style: none;
margin: 0;
padding: 0px;
}


#ser_fav ul a {
 border-style: none;
}

#ser_fav ul ul a {
 border-width: 1px;
 border-style: solid;
 border-color: #ccc #888 #555 #bbb;
 padding-right: 5px;
 padding-left: 5px;
}

#ser_fav a {
display: block;
margin: 0;
}


#ser_fav ul ul a:hover {
color: #a00;
background: #dee6f2;
}

#ser_fav li {
position: relative;
}

#ser_fav li li {

}


#ser_fav ul ul {
position: absolute;
z-index: 500;
width: 380px;
top: 100%;
left: 0;
}

#ser_fav ul ul ul {
position: absolute;
left: 100%;
top: 0;
width: 80px;
}

#ser_fav ul ul,
#ser_fav ul li:hover ul ul,
#ser_fav ul ul li:hover ul ul
{display: none;}

#ser_fav ul li:hover ul,
#ser_fav ul ul li:hover ul,
#ser_fav ul ul ul li:hover ul
{ display: block; background: #fff;}


#ser_fav ul:hover li {width: 100%; float:left;}