/*
	
	This CSS is the standard custom.css for Finnojet. This file
	can be modified to change colors, borders, ... 

	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
   ===============================================================================
 */
 
body {
	background: #e8e8e8;
	color: #4c575a;
	font: 10px verdana, arial, sans-serif;
	line-height: 14px;
}

td {
	color: #4c575a;
	font: 10px verdana, arial, sans-serif;
	vertical-align: top;
	line-height: 14px;
}

a {
	text-decoration: none;
}

a:link {
	color: #4c575a;
}
a:visited {
	color: #4c575a;
}


input {
	color: #4c575a;
	font-size: 10px;
	font-family: Verdana, Arial, Geneva, Helvetica, Sans-Serif;
	text-decoration: none;
	background-color: #fff;
	text-align: left; 
	border: solid 1px #4c575a;
	width: 236px; 
	height: 25px;
}

select {
	color: #4c575a; 
	font-size: 10px; 
	font-family: Verdana, Arial, Geneva, Helvetica, Sans-Serif;
	text-decoration: none; 
	background-color: #fff; 
	border: solid 1px #4c575a; 
	width: 370px; 
	height: 18px
}


/* ========== HTML styles in footer (id #foo) ========== */
#foo a {
	color: #ffffff;
	background: #4c575a;
}


/* ========== HTML styles in navigation menu (id #nav) ========== */
#nav div {
	line-height: 14px;
}

/*
   ===============================================================================
   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 {
	background: #ffffff;
	position: absolute;
	width: 206px;
	top: 161px;
	left: 0px;
    float: left;
}

/*
	Summary:	Header part
*/
#hea {
	background: #8cacce;
	color: #ffffff;
	position: absolute;
	width: 984px;
	height: 21px;
	top: 100px;
	left: 4px;
}

/*
	Summary:	Inner header part
	Comments:	Nested inside is '#hea'
*/
#hea_inner {
    padding-left: 155px;
    text-align: left;
    position: relative;
    top: 4px;
}

/*
	Summary:	Services part
*/
#ser {
    position: absolute;
    width: 984px;
    top: 126px;
    left: 4px;
    height: 30px;
    vertical-align: middle;
}

/*
	Summary:	Left service part
	Comments:	Nested inside is '#ser'
*/
#ser_left {
    background: #ffffff;
    width: 829px;
    height: 30px;
    text-align: right;
    float: left;
}


/*
	Summary:	Right service part
	Comments:	Nested inside is '#ser'
*/
#ser_right {
    background: #ffffff;
    width: 154px;
    height: 30px;
    float: right;
    text-align: right;
    margin-left: 1px;
}


/*
	Summary:	Contents part
*/
#con {
	color: #4c575a;
	background: #ffffff;
	position: absolute;
	top: 161px;
	left: 208px;
}

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

/*
	Summary:	Footer margin part, space between content and footer
	Comments:	Nested inside is '#con'
*/
#foo_margin {
	background: #e8e8e8;
}

/*
	Summary:	Footer part
	Comments:	Nested inside is '#con'
*/
#foo {
	background: #e8e8e8;
	color: #ffffff;
}

/*
	Summary:	Left footer part
	Comments:	Nested inside is '#foo'
*/
#foo_left {
	background: #4c575a;
	height: 21px;
}

/*
	Summary:	Right footer part
	Comments:	Nested inside is '#foo'
*/
#foo_right {
	background: #4c575a;
	text-align: right;
	height: 21px;
}

/*
   ===============================================================================
   Class Styles
  
   Styles defined by classes. Several elements may have the same class and an
   element may have multiple classes.
   Ex.: <td class="stylename1 stylename2">
   ===============================================================================
 */

/* ========== Navigation menu (".nav_") ==========
   Keyword:		Navigation menu
   Summary:		Navigation menu item properties
   Used in:		All pages
   Comments:	Nested in the layout block id "#nav" and its nested blocks
*/

.nav_level1_active {
    font-weight: bold;
    width: 180px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-style:solid;
    border-color: #8caad1;
    border-width:2px;
    border-left-width:15px;
}

.nav_level1_inactive {
    font-weight: bold;
    width: 180px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-style: solid;
    border-color: #8caad1;
    border-width: 2px;
    position: relative;
    left: 13px;
}

.nav_level2_active {
    width: 184px;
    padding-left: 1px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-style: solid;
    border-color: #c7d5e8;
    background: #dee6f2;
    border-width: 2px;
    position: relative;
    left: 13px;
}

.nav_level2_inactive {
    width: 180px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-style: solid;
    border-color: #c7d5e8;
    border-width: 2px;
    position: relative;
    left: 13px;
}

.nav_arrow {
	width: 12px;
}

.nav_line {
    background: #ffffff;
    border-style: solid;
    border-color: #ffffff;
    border-width: 0px;
    border-bottom-width: 4px;
}   

/*  text color for navigation */
.nav_level2_inactive a {
	color: #8caad1;
}

/*
	Class to override border setting of '#nav DIV' for last
	navigation item.
*/
#nav div.nav_last {
	border-bottom: none;
}

/* ========== Footer (".foo_") ==========
   Keyword:		Footer text
   Summary:		Footer text font properties
   Used in:		All pages
   Comments:	Nested in the layout block id "#foo" and its nested blocks
*/

.foo_text {
	color: #ffffff;
	vertical-align: middle;
}

/* ========== Services (".ser_") ==========
   Keyword:		Service link text
   Summary:		Service link text font properties
   Used in:		All pages
   Comments:	Nested in the layout block id "#ser" and its nested blocks
*/

.ser_link_font {
	color: #4c575a;
	line-height: 30px;
}

.ser_link_font_bold {
	color: #4c575a;
	font-weight: bold;
}


/* ---------- Title ----------
   Keyword:		Page title
   Summary:		Page title font layout
   Used in:		All pages
   Comments:	
*/

.con_header {
	color: #4c575a;
	font-weight: bold;
	font-size: 12px;
	line-height: 13px;
	font-family: Verdana, Arial, Geneva, Helvetica, Sans-Serif;
}

/* ---------- Background colors ----------
   Keyword:		Background colors
   Summary:		
   Used in:		Some pages
   Comments:	
*/

/* Headline border */
.con_bg_bluedark {
	background-color: #4c575a;
}

.con_bg_white {
	background-color: #fff;
}

.con_bg_grey {
	background-color: #e8e8e8;
}

/* Used in some payment pages */
.con_bg_payment_grey {
	background-color: #cccccc;
}

/* Used in some html files of evalauthen */
.con_bg_01 {
	background-color: #ecedf6;
}

.con_bg_bar_end {
	background-color: #e0e2f0;
}

/* ---------- Fonts ----------
   Keyword:		Font properties
   Summary:		
   Used in:		Some pages
   Comments:	
*/

/*
	May be removed from page since defaults are set
	for BODY and TD
*/
.con_normal {
	color: #4c575a; 
	line-height: 14px;	
}

/*
    Info: "con_challenge" f�r Sicherheitscode von USAFE
*/
.con_challenge {
    color: #4c575a; 
    font-weight: bold; 
    line-height: 14px; 
}

/*
	INFO: Use "con_font_bold" instead of this to mark bold font.

	May be replaced by "con_font_bold" from page since
	color and line height defaults are set for BODY and TD
*/
/* For strong (bold) page contents. ade 20060207 */
.con_strong {
	color: #4c575a; 
	font-weight: bold; 
	line-height: 14px; 
}

.con_strong-right {
    color: #4c575a; 
    font-weight: bold; 
    line-height: 14px; 
    text-align: right;
}

/*
	For bold page contents with *no* additional formatting like
	line height, etc.
*/
.con_font_bold {
	font-weight: bold;
}

/*
	Used only in "FHintBoxRenderer.java".
*/
.con_blue {
	color: #4c575a;
	line-height: 14px;
}

.con_red {
	color: #cc0000; 
	line-height: 14px;	
}

.con_red_bold {
	color: #cc0000; 
	font-weight: bold; 
	line-height: 14px; 
}

.con_green {
	color: #00AA00; 
	line-height: 14px;	
}

/* ---------- Link fonts ----------
   Keyword:		Background colors
   Summary:		
   Used in:		Some pages
   Comments:	Used in pages and renderer classes and also in server
   				responses withHTML part!!
*/

.con_link_blue {
	color: #4c575a;
}

.con_link_bluebold {
	color: #4c575a;
	font-weight: bold;
}


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

input.con_button {
	border: solid 1px #4c575a;
	background-color: #c7d5e8;
	color: #4c575a;
}

input.con_button_disabled {
	border: solid 1px #8caad1;
	background-color: #dee6f2;
	color: #959595;
}

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

input.con_buttonbig {
	border: solid 1px #4c575a;
	background-color: #c7d5e8;
	color: #4c575a;
}

input.con_buttonbig_disabled {
	border: solid 1px #8caad1;
	background-color: #dee6f2;
	color: #959595;
}

input.con_buttonextrabig {
    border: solid 1px #4c575a;
    background-color: #c7d5e8;
    color: #4c575a;
}

input.con_buttonextrabig_disabled {
    border: solid 1px #8caad1;
    background-color: #dee6f2;
    color: #959595;
}

input.con_buttonacrosstwocolumns {
    border: solid 1px #4c575a;
    background-color: #c7d5e8;
    color: #4c575a;
}

input.con_buttonacrosstwocolumns_disabled {
    border: solid 1px #8caad1;
    background-color: #dee6f2;
    color: #959595;
}

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

.con_area {
	font-size: 10px; 
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	background-color: #ffffff; 
	border: solid 1px #4c575a; 
}

/* ---------- 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 {
	border: 0px;
}
/* This class is used when the radios are in table column and
there is no need for labels */
.con_radio_label-cell-nolabel {
	border: 0px;
}

/* -- Used in FRadioRenderer.java -- */
/* This is for the cell surrounding the radio */
.con_radio-cell {
	border: 0px;
}
/* This class is for the radio itself */
.con_radio {
	border: 0px;
}
/* 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 {
	border: 0px;
}

/* ---------- 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 {
	border: 0px;
}

/* -- Used also in FCheckboxRenderer.java and FSelectManyCheckboxRenderer.java -- */
/* This class is for the checkbox itself */
.con_checkbox {
	border: 0px;
}
/* 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 {
	border: 0px;
}
/* This is for the cell surrounding the checkbox */
.con_checkbox-cell {
	border: 0px;
}

/* ---------- 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 {
	font-weight: bold;
}

/* Display field background color */
.con_display_area {
	background-color: #ecedf6;
}

/*
	Makes disabled and readonly text input field look like output text.
	Actually used in tradeRegistration.jsp (trading step 2).
*/
input.con_display_field {
	border: 0px; 
	background-color: #e8e8e8;
}

/* ---------- Hint box ----------
   Keyword:		Ebanking hint box
   Summary:		Style elements of hint box of ebanking application
   Used in:		Some pages
   Comments:
*/

/* Background color */
.con_hint_box {
	background-color: #8caad1;
}

/* ----- Tabbed panes -----
   Keyword:		Ebanking tabbed pane
   Summary:		Style elements of tabbed pane of ebanking application
   Used in:		Some pages
   Comments:
*/

a.con_tabbed-pane-link {
	font-weight: bold;
}
a.con_tabbed-pane-link:hover {
	color: #4c575a;
	font-weight: bold;
}
.con_tabbed-pane-border {
	background-color: #4c575a;
}
.con_tabbed-pane-selTab {
	background-color: #ffffff;
}
.con_tabbed-pane-nonselTab {
	background-color: #ffffff;
}

/* ----- 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 {
	color: red;
	background-color: #fcec00;
	border: solid #4c575a 1px;
}
.table-msgBox-info {
	border: solid #4c575a 1px;
}

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

.con_progress-inactive {
	color: #999999; 
	font-weight: bold; 
}

.con_progress-active {
	color: #4c575a; 
	font-weight: bold; 
}


/* ----- Error frame -----
   Keyword:		Ebanking error frame
   Summary:		Style elements of error frame of ebanking application
   Used in:		Some pages
   Comments:	Used only in domUtils.js
*/

.con_error-box {
	border-style: solid;
	border-color: #fcec00 !important;
	border-width: 1px;
}

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

.pager-table {
	height: 21px;
	background-color: #c7d5e8;
}

.td-pager-page {
	color: #4c575a;
}

.td-pager-selectedpage {
	color: #ff0000;
}

.td-pager-separator-image {
	color: #8caad1;
}


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

.td-headline {
	font-size: 10px;
	font-weight: bold;
}
.td-subtitle {
	font-size: 10px;
	font-weight: bold;
	background-color: #ffffff;
}
.td-header {
	font-size: 10px;
	font-weight: bold;
	border-left-width: 1px;
	border-left-style: solid;
}
.td-header-link {
	font-size: 10px;
	font-weight: bold;
}
.td-detail {
	font-size: 10px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #ff0022;
}
.td-radio {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #ff0022;
}
.td-strong {
	font-weight: bold;
}
.td-bg-even {
	background-color: #dee6f2;
}
.td-bg-odd {
	background-color: #ffffff;
}
.td-bg-selected {
    background-color: #ff0000;
}
.td-bg-footer {
	background-color: #c7d5e8;
}

/* 'Zeilenabschlussbalken 01 Trennlinien' */
.td-separator-line-header {
	border-left-color: #e8e8e8;
}

/* 'Zeilenabschlussbalken 02 Trennlinien' */
.td-separator-line-columns {
	border-left-color: #8caad1;
}

/* 'Zeilenabschlussbalken Trennlinien' */
.td-separator-line-footer {
	border-left-color: #8caad1;
}
.td-first-column {
	border-left-style: none;
}


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

/* Title (month year)*/
.font-cal-title {
	font-size: 12px;
	font-weight: bold;
	font-family: verdana, arial, helvetica, sans-serif;
}

/* Navigation*/
.tr-cal-navig {
	font-size: 12px;
	background-color: #c7cada;
	border-color: #e8e8e8;
}

/* 'Super class' for all days*/
.table-cal-days {
	font-size: 12px;
	font-family: verdana, arial, helvetica, sans-serif;
	border-color: #c7cada;
}

/* Weekdays (Mo Tu We...)*/
.tr-cal-weekdays {
	font-weight: bold;
	color: green;
	background-color: #d7d8e1;
}

/* Weekend days*/
.td-cal-weekend {
	background-color: #d7d8e1;
}

/* Current day*/
.font-cal-today {
	font-weight: bold;
	color: red;
}

/* Last chosen day*/
.font-cal-lastdate {
	font-weight: bold;
	color: blue;
}

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


/* ---------- 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_label_ipi {
	color: #e60040;
}
.con_input_mitt_area {
	font-family: monospace;
	font-size: 11px;
}


/* -- 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 {
	background-color: #ecedf6;
}

.con_position_detail_second_col {
	font-weight: bold; 
}


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

.con_row_box {
	font-size: 10px;
	font-weight: bold;
	background-color: #ffffff;
	border-color: #4c575a;
}

.con_row_box_left {
	border-style: solid;
	border-left-width: 1px;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
}

.con_row_box_middle {
	border-style: solid;
	border-left-width: 0px;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
}

.con_row_box_right {
	border-style: solid;
	border-left-width: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
}

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

.con_select-custom-pfana {
	background-color: #fff; 
}

.con_chart {
	border-style: solid;
	border-width: 1px;
	border-color: #e8e8e8;
}

/* -- Blue/orange payment slip (ezsOBPayment.jsp) -- */

.con_bg_orange {
	background-color: #ffefe1;
}

/* -- Ipi payment slip (ezsIpiPayment.jsp) -- */
.con_ipi_border {
	border: solid 2px #e8e8e8; 
}

/* -- Red/green payment slip (ezsRGPayment.jsp) -- */
.con_bg_lightred {
	background-color: #f5cccc;
}


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

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

.con_quicklink_icon {
	border: solid 0px;
	padding-top: 7px;
}

/*
	File upload field style
*/
input.con_upload {
	color: #0c1c8c; 
	font-size: 10px; 
	font-family: Verdana, Arial, Geneva, Helvetica, Sans-Serif;
	background-color: #fff; 
	border: solid 1px #4c575a; 
}

/*
	Used to set the disabled style of a text input field or a drop down menu for state changes from javascript.
 */
.con_disabled_field {
	border: solid 1px #b6badc;
	color: #888888;
}

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

/* ===================== css-hover menu coding ==================== */

/*
	Background color of active menu item
*/
#ser_fav ul ul a:hover {
	background: #dee6f2;
}

/*
	Background color of inactive menu items
*/
#ser_fav ul ul {
	background: #fff;
}

/*
	height and width of menu-items
*/
#ser_fav ul ul {
	line-height: 20px;
	width: 380px;
}


/*
	width of 2'level menu items
*/
#ser_fav ul ul ul {
	width: 80px;
}