@charset "UTF-8";

/****************************************************************
*** GLOBAL ******************************************************
****************************************************************/

img {
    border: 0px;
    margin: 0px;
}
input[type="image"] {
    border: 0px;
}

ul, ol { /*margin-left: 50px;*/ }


/*** HEADERS ****************************************************/
/* Common for all headers */



/****************************************************************
*** MASTER TEMPLATE LAYOUT **************************************
****************************************************************/

/*** TOP TOOLBAR ***********************************************/
#toolbar_top_container {
    width: 1290px;
    min-width: 1295px;
    margin: 0 2%;
    padding: 2px 0px 10px; /* added to compensate 2px border width of other major regions */
    background-color: #A17954;
}
 
#toolbar_top {
    float: left;
    width: 1290px;
    min-width: 1290px;
    height: 60px;
    margin: 0% 0%;
}

#toolbar_top_foo {
    float: left;
    width: 1290px;
    min-width: 1290px;
    height: 40px;
    margin: 0% 0%;
}


#toolbar_top ul {
    float: right;
    height: 34px;
    list-style-type: none;
}
#toolbar_top li {
    float: left;
}
#toolbar_top li .separator {
    display: block;
    margin: 8px;
    color: #FFFFFF;
}
#toolbar_top li .mseparator {
    display: block;
    margin: 6px;
    color: #FFFFFF;
}
#toolbar_top li  a, #toolbar_top li  a:visited  {
    color: #FFFFFF;
    text-decoration: none;
    line-height: 34px;
}

#toolbar_top_foo ul {
    float: right;
    height: 34px;
    list-style-type: none;
}
#toolbar_top_foo li {
    float: left;
}
#toolbar_top_foo li .separator {
    display: block;
    margin: 8px;
    color: #FFFFFF;
}
#toolbar_top_foo li  a, #toolbar_top li  a:visited  {
    color: #FFFFFF;
    text-decoration: none;
    line-height: 34px;
}


/*** TOP TOOLBAR - SEARCH **************************************/
#toolbar_top_search {
    width: 315px;
    margin-top: -3px;
}
#toolbar_top_search form {
    float: left;
}
#toolbar_top_search input[type="text"] {
    width: 267px;
    height: 20px;
    border: 0;
    margin-top: 10px;
    padding: 0 10px;
    background-color: #EEEEEE;
    background: url("../images/toolbar_top_search_box.png") no-repeat;
}
#toolbar_top_search input[type="image"] {
    float: right;
    margin-top: 10px;
    width: 24px;
    height: 20px;
}


/*** HEADER ****************************************************/
#header_container {
    position: relative; /* as banner is absolutely positioned */
    width: 96%;
    min-width: 1290px;
    margin: 0 2%;
    padding: 0px 2px; /* added to compensate 2px border width of other major regions */
    height: 70px;
    /*background-image: url("../images/header_background_floating.png");*/
    border-radius: 6px;
}

#header_dt_logo {
    float: left;
    margin: 19px 0 0 0px;
}

.siglogo {
    width: 307px;
    height: 96px;
}

.photologo {
    width: 158px;
    height: 138px;
}


#header_dt_logo a {
    display: block;
    width: 100px;
    height: 35px;
    margin-top:-15PX;
}

#header_right {
    float: right;
    width: 674px; /* 684px (width) - 10px (right margin) */
    height: 72px;
    margin-left: -684px;
    margin-right: 10px; /* margin no to cover border-radius of header_container */
    background: url("../images/header_background_right.png") no-repeat;
    background-position: right bottom;
}
 
#header_banner {
	float: left;
    width: 728px;
    height: 70px;
    background-color: #F1F1F1;
    border: 1px solid #FFFFFF;
}

#header_banner img {
    margin: 0px;
}
 
 
/*** HORIZONTAL MENU ***********************************/
#menu_horizontal_container {
    position: relative; /* as menu and right image are absolutely positioned */
    width: 1290px;
    min-width: 1290px;
    margin: 8px 2% 0px;
    height: 37px; /* 41px (height) - 2x2px (top & bottom borders) */
    background-color: #E9EEEF;
    border: 2px solid #FFFFFF;
}
#menu_horizontal_right {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 500px;
    height: 37px;
    background: url("../images/menu_horizontal_background_right.png") no-repeat;
}
#menu_horizontal {
    position: absolute;
    width: 100%;
    top: 3px;
    left: 3px;
    z-index: 100;
}


/*** CONTENT ***************************************************/
/* 
 To add a menu tree to the page add 
 "content_container_with_menutree" class to div with id="content_container"
*/

/*** CONTENT BORDERS ***/
.content_border_container {
    width: 1290px;
    min-width: 1290px;
    height: 7px;
    margin: 0px 2%;
    border: 2px solid #FFFFFF;
}
#content_top_border_container {
    margin-top: 8px;
    border-bottom: 0px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
#content_bottom_border_container {
    background-color: #FFFFFF;
    border-top: 0px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/*** SUBSITE HEADER ***/
/*
 Header height must be controlled by header content!

 Example with minimum HTML and CSS. [logo_width] should be replaced with
 the width of logo image (logo.png) in pixels.
 <div id="subsite_header_outer" style="float:left;width:100%;height:100%;">
     <div id="subsite_header_inner" style="height:100%;margin-right:[logo_width]px;">
         Subsite Header Content
     </div>
 </div>
 <div id="subsite_header_logo" style="float:left;width:[logo_width]px;margin-left:-[logo_width]px;"><img src="logo.png" alt="Logo" /></div>
*/
#content_top_border_container.content_top_border_container_with_subsite { 
    height: auto; /* override default collapsed border height. It MUST BE SET TO AUTO as height must be controlled by header content. */
    background: #FFFFFF url("../images/content_background.png") repeat-x;
}

#subsite_header_container {
    display: none;
}
#content_top_border_container.content_top_border_container_with_subsite #subsite_header_container {
    display: block;
    margin: 0px 18px;
    overflow: hidden; /* prevent main content from being overlaped with header content */
}


/*** CONTENT CONTAINER ***/
#signature {
    width:310px;
    height:98px;
    border: 1px solid #000000;
    /*overflow: hidden;*/
}

#photo {
    width:160px;
    height:140px;
    border: 1px solid #000000;
    /*overflow: hidden;*/
}

#content_container {
    width:1290px;
    min-width: 1290px;
    margin: 0px 2%;
    background: #FFFFFF url("../images/content_background.png") repeat-x;
    border: 2px solid #FFFFFF;
    border-top: 0px;
    /*overflow: hidden;*/
}
#content_container.content_container_with_subsite { 
    background: #FFFFFF none;
}
#content_inner_container {
    position: relative; /* required for expand button */
    margin: 0px 0px;
    background: #FFFFFF;
    border: 2px solid #F6F6F6;
    border-top: 1px solid #EAEAEA;
    border-radius: 6px;
    width:100%;
    height:100%;
}
#content_inner_container_full {
    position: relative; /* required for expand button */
    margin: 0px 0px;
    background: #FFFFFF;
    border: 2px solid #F6F6F6;
    border-top: 1px solid #EAEAEA;
    border-radius: 6px;
    width:1290px;
}
#content_container.content_container_with_menutree #content_inner_container {
    margin-left: 221px; /* 220px (menu width) + 10px (menu right margin) + 18px (menu left margin) + 2x2px (menu side borders) */
}
#content_container.content_container_with_subsite #content_inner_container { 
    border-top: 2px solid #F6F6F6;
}

/*** CONTENT HOLDER ***/
#content_holder_outer {
    float: left;
    width: 100%;
    min-height: 300px;
}
#content_holder_inner { /* MUST EXIST to provide margins for content with or without menu */
    margin: 0px;
}


/*** MENU TREE ***/
#content_menutree {
    display: none;
    position: relative;
    width: 220px;
    padding: 0px 0px;
}
#content_container.content_container_with_menutree #content_menutree {
    display: block;
    float: left;
    margin: -1px 0px -2px; /* as menu is inside #content_inner_container which has borders we add negative margins to overlap them */
    margin-left: -225px; /* 220px (width) + 10px (menu right margin) + 2x2px (side borders) + 2px (#content_inner_container right border) */
    background: #FFFFFF;
    border: 2px solid #F6F6F6;
    border-top: 1px solid #EAEAEA;
    border-radius: 6px;
}
#content_container.content_container_with_menutree.content_container_with_subsite #content_menutree { 
    margin-top: -2px;
    border-top: 2px solid #F6F6F6;
}

#btn_menutree_collapse {
    position: absolute;
    top: 10px;
    right: 0px;
    margin: 0px;
}
#btn_menutree_expand {
    display: none;
    position: absolute;
    top: 10px;
    left: -21px;
    margin: 0px;
}
#btn_menutree_expand img,
#btn_menutree_collapse img {
    margin: 0px;
}


/*** SUBSITE BLOCKS ***/
/* Subsite top menu */
div.subsite_menu_top ul {
    padding-left: 0px;
}
div.subsite_menu_top ul li {
    display: inline-block;
    margin: 2px 6px 22px 0px;
    padding: 0px;
    color: #DD2828;
    text-align: center;
    font-weight: bold;
    border-left: 1px solid #616161;
}
div.subsite_menu_top ul li:first-child {
    border-left: none;
}
div.subsite_menu_top ul li a { 
    display: block;
    margin-left: 6px;
    color: #DD2828;
}
div.subsite_menu_top ul li:first-child a {
    margin-left: 0px;
}
div.subsite_menu_top ul li.active { }
div.subsite_menu_top ul li.active span { }
 

/*** FOOTER ****************************************************/
#footer_container {
    width: 100%;
    min-width: 1300px;
    height: 55px;
    margin-top: 8px;
    padding-top: 5px;
    background-color: #FFFFFF;
    
}   
#footer {
    position: relative; /* for absolutely positioned social networks and stakeholders titles */
    width: 97%;
    height: 50px;
    min-width: 1200px;
    margin: 0 0;
    padding: 0px 2px; /* added to compensate 2px border width of other major regions */
    background-color: #FFFFFF;
    border-radius: 6px;
}

#footer_social_networks {
	
    float: left;
    margin: 38px 0px 0px 32px;
}
#footer_social_networks img { margin-right: 8px; }
#footer_stakeholders {
	width:1290px;
	float: right;
	 background-color: #000000;
    margin: 25px 6px 0px 0px; /* right margin: 30px - 24px (right margin of "footer_stakeholders a") */
}
#footer_stakeholders a { margin-right: 24px; }

.footer_title {
    position: absolute;
    top: -9px;
    padding: 6px;
    background-color: #FFFFFF;
    border: 2px solid #F1F1F1;
    border-radius: 6px;
    font-size: 65%;
}
#footer_social_networks_title { left: 25px; }
#footer_stakeholders_title { right: 25px; }

#copyright {
	width:1290px;
	height:30px;
    margin: 16px 2% 0px;
    padding-left: 2px;
}
#copyright a, #copyright a:visited {
    text-decoration: none;
    color: #000000;
}


/******************************************************************
*** LOGIN PAGE ****************************************************
******************************************************************/
div#login_control {
    width: 320px;
    margin: 20px auto;
    padding: 14px 40px;
    background-color: #F1F1F1;
    border: 1px solid #CDCDCD;
}

/* Title */
div#login_control #title {
    font-size: 18px;
    font-weight: bold;
    color: #373A3D;
    text-align: center;
}

/* Form */
div#login_control form {
    margin: 30px 0px 16px;
}

/* Form labels and fields */
div#login_control .label {
    margin-top: 14px;
    font-weight: bold;
    color: #373A3D;
    text-align: left;
}
div#login_control .field {
    margin-top: 4px;
}
div#login_control .field input{
    width: 300px;
    height: 28px;
    padding: 0px 10px;
    font-size: 16px;
    border: 1px solid #CDCDCD;
}
div#login_control .field input:focus{
    background-color: #FFFFFF;
}

/* Submit button */
div#login_control .controls {
    margin-top: 26px;
    text-align: center;
}

/* Forgot password link */
div#login_control div#forgot-pwd { text-align: center; }


/******************************************************************
*** TRANSACTIONAL PORTAL CONTROLS *********************************
******************************************************************/

/*** MODAL WINDOW ************************************************/
/*  To change modal window width modify "width" property in following classes:
    1. modal_window_header_part_floating and modal_window_bottom_border_part_floating (they are equal)
    2. modal_window (total width: left + floating + right)
    3. modal_window_body (euquals to "width" property of "modal_window" property))
    4. modal_window_bottom_border_buttons (equals to "width" property of "modal_window" minus (2 x it's own "left" property))
   
    Modal window example:   
    <div id="my_modal_window" class="modal_window_container">
        <div class="modal_window_background"></div>
        <div class="modal_window">
            <!-- Modal Window header -->
            <div class="modal_window_header">
                <div class="modal_window_header_part_left"></div>
                <div class="modal_window_header_part_floating"></div>
                <div class="modal_window_header_part_right"></div>
                <div class="modal_window_header_message">Instruction message will be here.</div>
                <div class="modal_window_header_button_close"></div>
            </div>
            <!-- Modal Window body (content and right border) -->
            <div class="modal_window_body">
                <!-- Modal Window content -->
                <div class="modal_window_body_content">
                    <input type="text" value="Text Box 1" />
                    <input type="text" value="Text Box 2" />
                    <br /><br />
                    Some text...
                    <br /><br />
                    <div class="modal_window_message_info">
                        <img src="img/icon_message_info.gif" alt="">
                        Info message text text text text text text text text text text text
                        text text text text text text text text text text text text text text
                        text text text text text text text text text text text text text text
                        ...
                    </div>
                    <br /><br />
                </div>
                <div class="modal_window_body_right_border">
                </div>
            </div>
            <!-- Modal Window bottom border (buttons go here) -->
            <div class="modal_window_bottom_border">
                <div class="modal_window_bottom_border_part_left"></div>
                <div class="modal_window_bottom_border_part_floating"></div>
                <div class="modal_window_bottom_border_part_right"></div>
                <!-- Modal Window buttons -->
                <div class="modal_window_bottom_border_buttons">
                    <input type="button" value="Btn1" />
                    <input type="button" value="Btn2" />
                </div>
            </div>
        </div>
    </div>
    
    Note: use juery to hide modal window by caling "hide() method" on click on class "modal_window_header_button_close"
*/
.modal_window_container {
    display: none;
    position: fixed;
    width:100%;
    height:100%;
    top: 0px;
    left: 0px;
    z-index: 1000;
}
.modal_window_background {
    position: fixed;
    width:100%;
    height:100%;
    top: 0px;
    left: 0px;
    z-index: 1000;
    background-color: #F1F1F1;
    filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
}
.modal_window {
    width:703px;
    position: fixed;
    margin-top: 166px;
    padding-left: 330px;
    z-index: 1000;
}

/* Header */
.modal_window_header {
    position: relative;
    height: 65px;
}
.modal_window_header_part_left {
    float: left;
    width: 12px;
    height: 65px;
    background: url("../images/modal_window_background_header_left.gif");
}
.modal_window_header_part_floating {
    float: left;
    width: 249px;
    height: 65px;
    background: url("../images/modal_window_background_header_floating.gif");
}
.modal_window_header_part_right {
    float: left;
    width: 441px;
    height: 65px;
    background: url("../images/modal_window_background_header_right.gif");
}

.modal_window_header_message {
    position: absolute;
    width: 90%;
    height: 47px;
    top: 0;
    left: 0;
    color: #FFFFFF;
    font-weight: bold;
    padding: 20px 0 6px 34px;
}
.modal_window_header_button_close {
    position: absolute;
    top: 11px;
    right: 20px;
    width: 23px;
    height: 25px;
    background: url("../images/button_modal_close.gif") no-repeat;
    cursor: pointer;
}

/* Body */
.modal_window_body {
    position: relative;
    width: 702px;
    background-color: #F1F1F1;
}
.modal_window_body_content {
    padding: 0 30px 30px;
    background: url("../images/modal_window_background_body_content_and_right_border.gif") repeat-y;
}
.modal_window_body_right_border {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: url("../images/modal_window_background_body_content_and_right_border.gif") repeat-y;
}
.modal_window_message_info {
    position: relative;
    height: 35px;
    padding: 10px 0px 0px 50px;
    background: url("../images/icon_message_info.gif") no-repeat;
}
.modal_window_message_info img {
    position: absolute;
    left: 0;
}

/* Bottom border */
.modal_window_bottom_border {
    position: relative;
    height: 65px;
}
.modal_window_bottom_border_part_left {
    float: left;
    width: 12px;
    height: 65px;
    background: url("../images/modal_window_background_bottom_border_left.gif");
}
.modal_window_bottom_border_part_floating {
    float: left;
    width: 249px;
    height: 65px;
    background: url("../images/modal_window_background_bottom_border_floating.gif");
}
.modal_window_bottom_border_part_right {
    float: left;
    width: 441px;
    height: 65px;
    background: url("../images/modal_window_background_bottom_border_right.gif");
}

/* Bottom border buttons */
.modal_window_bottom_border_buttons {
    position: absolute;
    width: 643px;
    height: 100%;
    top: 0px;
    left: 30px;
    padding-top: 16px;
    text-align: right;
    background: url("../images/modal_window_background_bottom_border_buttons.gif") repeat-x transparent;
}


/*** SEARCH WINDOW (MODAL WINDOW EXTENSION) **********************/
/* Note: depends on modal window styles:
    - modal_window_container
    - modal_window_background
    - modal_window

Example:
<div id="test_search_window" class="modal_window_container">
    <div class="modal_window_background">&nbsp;</div>
    <div class="modal_window">
        <!-- Modal Window header -->
        <div class="search_window_header">
            <div class="search_window_header_part_left">&nbsp;</div>
            <div class="search_window_header_part_floating"><div class="search_window_header_title">Search</div></div>
            <div class="search_window_header_part_right">&nbsp;</div>
            <div class="search_window_header_button_close">&nbsp;</div>
        </div>
        <!-- Modal Window body (content and right border) -->
        <div class="search_window_body">
            <!-- Modal Window content -->
            <div class="search_window_body_content">
                <div class="search_window_body_content_inner">
                    <div class="search_window_body_content_search_criteria">
                        <table>
                            <tr><td colspan="2" class="search_window_body_content_search_criteria_heading"><span class="bold">HEADING AREA</span> |  SEARCH</td></tr>
                            <tr>
                                <td class="search_window_body_content_search_criteria_field">Search Criteria <span class="field_required_indicator">*</span></td>
                                <td class="search_window_body_content_search_criteria_field"><input type="text" value="Partial or Full" /></td>
                            </tr>
                            <tr>
                                <td class="search_window_body_content_search_criteria_field">Search Criteria <span class="field_required_indicator">*</span></td>
                                <td class="search_window_body_content_search_criteria_field"><input type="text" value="Partial or Full" /></td>
                            </tr>
                        </table>
                    </div>
                    <div class="search_window_body_buttons">
                        <input type="button" value="Search" class="button_regualr_108x29" />
                    </div>
                    <table class="table search_results_table">
                        <thead>
                            <tr>
                                <th>Column 1</th>
                                <th>Column 2</th>
                                <th>Column 3</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Value 1.1</td>
                                <td>Value 1.2</td>
                                <td>Value 1.3</td>
                            </tr>
                            <tr>
                                <td>Value 2.1</td>
                                <td>Value 2.2</td>
                                <td>Value 2.3</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="search_window_body_right_border">&nbsp;</div>
        </div>
        <!-- Modal Window bottom border (buttons go here) -->
        <div class="search_window_bottom_border">
            <div class="search_window_bottom_border_part_left">&nbsp;</div>
            <div class="search_window_bottom_border_part_floating">&nbsp;</div>
            <div class="search_window_bottom_border_part_right">&nbsp;</div>
            <!-- Modal Window buttons -->
            <div class="search_window_bottom_border_buttons"><input type="button" value="Close" class="button_regualr_108x29" onclick="hideSearchWindow();return false;" /></div>
        </div>
    </div>
</div> */

/* Header */
.search_window_header {
    position: relative;
    height: 24px;
}
.search_window_header_part_left {
    float: left;
    width: 6px;
    height: 24px;
    background: url("../images/search_top_left.png") no-repeat;
}
.search_window_header_part_floating {
    float: left;
    width: 691px;
    height: 24px;
    background: url("../images/search_top_floating.png") repeat-x;
}
.search_window_header_title {
    margin-top: 4px;
    color: #404245;
    font-weight: bold;
}
.search_window_header_part_right {
    float: left;
    width: 6px;
    height: 24px;
    background: url("../images/search_top_right.png") no-repeat;
}

.search_window_header_button_close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 15px;
    height: 15px;
    background: url("../images/button_context_close.gif") no-repeat;
    cursor: pointer;
}

/* Body */
.search_window_body {
    position: relative;
    width: 703px;
    background-color: #E3E3E3;
}
.search_window_body_content {
    padding: 0 6px;
    color: #404245;
    background: url("../images/search_middle_left.png") repeat-y;
}
.search_window_body_content_inner {
    padding: 1px;
    border: 1px solid #B9B9B9;
    background-color: #EFEFEF;
}

/* Body - search criteria area */
.search_window_body_content_search_criteria {
    height: 74px;
    padding: 10px 16px 16px;
    border: 1px solid #B9B9B9;
    background: #FFFFFF url("../images/search_search_criteria.png") no-repeat top right;
}

.search_window_body_content_search_criteria1 {
    height: 120px;
    padding: 10px 16px 16px;
    border: 1px solid #B9B9B9;
    background: #FFFFFF url("../images/search_search_criteria.png") no-repeat top right;
}
.search_window_body_content_search_criteria_heading {
    padding-bottom: 6px;
    color: #DD2828;
}
.search_window_body_content_search_criteria_field {
}
.search_window_body_content_search_criteria_field input {
    margin-left: 6px;
    color: #C5C6C7;
}

/* Buttons under search criteria area */
.search_window_body_buttons {
    width: 100%;
    margin-top: 7px;
    text-align: right;
}
.search_window_body_buttons input { margin-right: 4px; }
.search_window_body_right_border {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: url("../images/search_middle_right.png") repeat-y;
}

/* Search results table */
.search_results_table  { 
    width: 679px; 
    margin: 8px 4px 4px; 
    text-align: left;
}
.search_window_body_content_inner table th { 
    background-color: #E3E3E3;
}
.search_window_body_content_inner table td { 
    background-color: #FFFFFF;
}

/* Bottom border */
.search_window_bottom_border {
    position: relative;
    height: 44px;
}
.search_window_bottom_border_part_left {
    float: left;
    width: 6px;
    height: 44px;
    background: url("../images/search_bottom_left.png") no-repeat;
}
.search_window_bottom_border_part_floating {
    float: left;
    width: 691px;
    height: 44px;
    background: url("../images/search_bottom_floating.png") repeat-x;
}
.search_window_bottom_border_part_right {
    float: left;
    width: 6px;
    height: 44px;
    background: url("../images/search_bottom_right.png") no-repeat;
}

/* Bottom border buttons */
.search_window_bottom_border_buttons {
    position: absolute;
    width: 691px;
    top: 0px;
    left: 6px;
    margin-top: 7px;
    text-align: right;
}
.search_window_bottom_border_buttons input { margin-right: 4px; }


/*** PROGRESS BAR ************************************************/
/* Note: depends on modal window styles:
    - modal_window_container
    - modal_window_background
    - modal_window
    
    Example:
    <div id="my_progress_bar" class="modal_window_container">
        <div class="modal_window_background"></div>
        <div class="modal_window">
            <div class="progress_bar_container">
                <!-- Progress bar primary message -->
                <div class="progress_bar_message_primary">
                    <span class="progress_bar_message_primary_text_1">Primary Message will be here,</span>
                    <span class="progress_bar_message_primary_text_2">please wait...</span>
                </div>
                <!-- Progress bar -->
                <div class="progress_bar">
                    <div class="progress_bar_completed"></div>
                </div>
                <!-- Progress bar secondary message -->
                <div class="progress_bar_message_secondary">Secondary Message (Optional)</div>
            </div>
        </div>
    </div>
*/
.progress_bar_container {
    width: 365px;
    height: 136px;
    border: 1px solid transparent;
    background: url("../images/progress_bar_background_container.gif") no-repeat;
    padding: 0 26px;
}

.progress_bar_message_primary { margin-top: 22px; }
.progress_bar_message_primary_text_1 { color: #DD2828; }
.progress_bar_message_primary_text_2 { }

.progress_bar {
    height: 32px;
    border: 1px solid #CDCDCD;
    margin-top: 10px;
}
.progress_bar_completed {
    width: 0;
    height: 32px;
    background: url("../images/progress_bar_background.jpg") repeat-x;
}

.progress_bar_message_secondary { margin-top: 16px; color: #696969; }


/*** VALIDATION AND REQUIRED FIELDS ******************************/
/* Span tag that contains star or other required field indicator */
.field_required_indicator { color: #EC3F1D; }
/* Element that contains validation errors list */
.validation_errors { color: #EC3F1D; }


/*** CALENDAR ****************************************************/
.calendar_container {
    width: 182px;
    height: 270px;
    padding: 6px;
    color: #717171;
    border: 1px solid #B9B9B9;
    background-color: #E3E3E3;
}
.calendar {
    width: 182px;
    height: 208px;
    margin-top: 4px;
    padding-left: 1px;
    border: 1px solid #B9B9B9;
    background-color: #FFFFFF;
}

.calendar_label_top { font-weight: bold; }
.button_calendar_close { float:right; width: 15px !important; height: 15px !important; background: url("../images/button_context_close.gif") no-repeat !important; }

.calendar .month_controls { height:26px; color: #DD2828; line-height:26px; text-align:center; font-weight: bold; }
.calendar .month_controls .prev_month { float: left; width: 22px !important; height: 22px !important; margin: 2px 0px 0px 2px; background: url("../images/calendar_button_previous_month.gif") no-repeat !important; cursor: pointer; }
.calendar .month_controls .next_month { float: right; width: 22px !important; height: 22px !important; margin: 2px 2px 0px 0px; background: url("../images/calendar_button_next_month.gif") no-repeat !important; cursor: pointer; }

.calendar_week_day, .calendar_day_active, .calendar_day_inactive, .calendar_day_today { 
    float: left;  
    width: 24px; 
    height: 24px; 
    margin: 1px; 
    line-height: 24px;
    text-align: center; 
    cursor: pointer;
}
.calendar_week_day { background: url("../images/calendar_background_week_day.gif") no-repeat; color: #FFFFFF; font-size: 10pt; cursor: arrow; }
.calendar_day_active { background: url("../images/calendar_background_day.gif") no-repeat; }
.calendar_day_inactive { }
.calendar_day_today { background: url("../images/calendar_background_today.gif") no-repeat; color: #FFFFFF; }

.calendar_button_today { float:right; width: 108px !important; height: 29px !important; margin-top: 8px; background: url("../images/calendar_button_today.gif") no-repeat !important; color: #FFFFFF;}


/*** TOOLTIP *****************************************************/
.tooltip_container {
    position: relative;
    width: 500px;
    height: 80px;
    background: url("../images/tooltip_down.png") no-repeat left bottom;
}
.tooltip_floating {
    float: left;
    width: 480px;
    height: 67px;
    margin: 0px 10px;
    background-color: #F1F1F1;
}
.tooltip_left {
    float: left;
    width: 440px;
    height: 67px;
    margin-left: -100%;
    background: url("../images/tooltip_left.png") no-repeat;
}
.tooltip_right {
    float: left;
    width: 10px;
    height: 67px;
    margin-left: -10px;
    background: url("../images/tooltip_right.png") no-repeat;
}
.tooltip_content {
    position: absolute;
    width: 410px;
    height: 28px;
    top: 16px;
    left: 16px;
    padding: 8px 0px 0px 50px;
    font-size: 14pt;
    overflow: hidden;
}
.tooltip_error {
    color: #DD2828;
    background: url("../images/icon_message_error.gif") no-repeat left top;
}
.tooltip_info {
    color: #DD2828;
    background: url("../images/icon_message_info.gif") no-repeat left top;
}
.tooltip_confirmation {
    color: #006633;
    background: url("../images/icon_message_confirmation.gif") no-repeat left top;
}


/*** MESSAGE HEADINGS ********************************************/
.bottom-buttons{
    text-align: center;
}
.heading_message {
    padding: 2px 0px 0px 32px;
    font-size: 17px;
    font-family:Cairo;
}
.heading_message_error {
    color: white;
    background: url("../images/icon_message_error_30x30.png") no-repeat left top;
    font-family:Cairo;
}
.heading_message_info {
    color: white;
    background: url("../images/icon_message_info_30x30.png") no-repeat left top;
    font-family:Cairo;
}
.heading_message_confirmation {
    color: white;
    background: url("../images/icon_message_confirmation.gif") no-repeat left top;
    font-family:Cairo;
}


/*** INNER PAGE MESSAGES *****************************************/
.inner_page_message_container { position: relative; }

.inner_page_message_heading {
    position: absolute;
    top: 6px;
    left: 1%;
    padding-left: 8px;
    font-size: 14pt;
    font-weight: bold;
}
.inner_page_message_heading_error { color: #C6262C; }
.inner_page_message_heading_info { color: #C6262C; }
.inner_page_message_heading_confirmation { color: #006633; }

/* Top */
.inner_page_message_top {
    width: 68%;
    min-width: 350px;
    height: 33px;
    margin: 0px 1%; /* added to avoid overlaying of the top left and top right rounded corners by background */
    background-color: #F1F1F1;
}
.inner_page_message_top_left {
    float: left;
    width: 310px;
    height: 33px;
    margin-left: -1%; /* compensates left margin of .inner_page_message_top */
    background: url("../images/inner_message_top_left.png") no-repeat;
}
.inner_page_message_top_right {
    float: right;
    width: 17px;
    height: 33px;
    margin-right: -1%; /* compensates right margin of .inner_page_message_top */
    background: url("../images/inner_message_top_right.png") no-repeat;
}

/* Content */
.inner_page_message_content_container {
    position: relative;
    float: left;
    width: 68%;
    min-width: 350px;
    min-height: 225px;
    margin: 0px 1%; /* consistency in width and margins between top, content and bottom */
}
.inner_page_message_content {
    min-height: 225px;
    padding: 20px;
    background-color: #FFFFFF;
}
.inner_page_message_content_left_border {
    position: absolute;
    top: 0px;
    left: -1%; /* compensates left margins of content container */
    width: 14px;
    height: 100%;
    background: #F1F1F1 url("../images/inner_message_content_left.png") no-repeat;
}
.inner_page_message_content_right_border {
    position: absolute;
    top: 0px;
    right: -1%; /* compensates left margins of content container */
    width: 14px;
    height: 100%;
    background-color: #F1F1F1;
}

/* Bottom */
.inner_page_message_bottom {
    float: left;
    width: 68%;
    min-width: 350px;
    height: 16px;
    margin: 0px 1%; /* added to avoid overlaying of the bottom left and bottom right rounded corners by background */
    background-color: #F1F1F1;
}
.inner_page_message_bottom_left {
    float: left;
    width: 310px;
    height: 16px;
    margin-left: -1%; /* compensates left margin of .inner_page_message_bottom */
    background: url("../images/inner_message_bottom_left.png") no-repeat;
}
.inner_page_message_bottom_right {
    float: right;
    width: 17px;
    height: 16px;
    margin-right: -1%; /* compensates right margin of .inner_page_message_bottom */
    background: url("../images/inner_message_bottom_right.png") no-repeat;
}


/*** PAGINATION **************************************************/
.pagination_container {
    clear: both;
    text-align: center;
}

.pagination_pages li { display: inline-block; }
.pagination_pages li a { display: block; font-weight: bold; }
.pagination_pages li span { display: block; }

.pagination_pages .pagination_first {
    width: 15px;
    height: 11px;
    background: url("../images/pagination_first.png") no-repeat;
}
.pagination_pages .pagination_previous {
    width: 11px;
    height: 11px;
    background: url("../images/pagination_previous.png") no-repeat;
}
.pagination_pages .pagination_next {
    width: 11px;
    height: 11px;
    background: url("../images/pagination_next.png") no-repeat;
}
.pagination_pages .pagination_last {
    width: 15px;
    height: 11px;
    background: url("../images/pagination_last.png") no-repeat;
}


/*** WIZARD ******************************************************/
div.wizard { }
    
div.wizard ul {
    padding: 0px 0px 0px 10px;
    border-bottom: 1px solid #ccc;
}

div.wizard ul li {
    display: inline-block;
    width: 170px;
    height: 152px;
    margin: 0px 0px -4px 0px;
    padding: 0px;
    cursor: default;
}
div.wizard ul li.active {
    border: 1px solid #CCCCCC;
    border-bottom: 1px solid #FFFFFF;
}
div.wizard ul li img {
    float: left;
    margin: 0px 0px 6px;
    padding: 20px 0px 0px 26px;
}
div.wizard ul li .wizard_step_number {
    float: right;
    padding: 12px 16px 0px 0px;
    line-height: 68pt;
    text-align: left;
    font-size: 68pt;
    color: #C8C8C8;
}
div.wizard ul li.active .wizard_step_number{
    color: #DE2729;
}
div.wizard ul li .wizard_step_title {
    float: left;
    clear: both;
    width: 130px; /* for IE */
    margin: 6px 0px 0px 30px;
    color: #DE2729;
    font-size: 12pt;
    font-weight: bold;
}


/******************************************************************
*** TMP ***********************************************************
******************************************************************/
#toolbar_top ul.menu_topnav li.item-644,
#toolbar_top ul.menu_topnav li.item-646,
#toolbar_top ul.menu_topnav li.item-648,
#toolbar_top ul.menu_topnav li.item-655 {
    display: none;
}


/*** TMP - ESERVICE SAMPLE ***************************************/
#breadcurmb {
    font-family: 'Open Sans',sans-serif,helvetica,arial;
    font-size: 12px;
    font-weight: bold;
    margin-left: 8px;
    padding: 4px 0px 0px;
    text-align: left;
    color: #3E7AA0;
}
#breadcurmb .breadcrumb_page_title {
    color: #000000;
}

/* Header */
#header {
    float: left;
    width: 100%;
}
#header-left {
    float: left;
    width: 15px;
    height: 90px;
    margin-left: -100%;
    background: url("../images/top_left.jpg") no-repeat;
}
#header-right {
    float: left;
    width: 56px;
    height: 90px;
    margin-left: -56px;
    background: url("../images/top_right.png") no-repeat;
}
#header-floating {
    float: left;
    width: 100%;
    height: 90px;
    background: url("../images/top_floating.jpg") repeat-x;
}
#header-floating .title {
    color: #316080;
    font-family: 'Open Sans',sans-serif,helvetica,arial;
    font-size: 20px;
    margin: 24px 0px 0px 10px;
    padding: 5px;
    text-align: left;
    text-decoration: none;
}

/* Content */
#main-content {
    float: left;
    width: 100%;
    background: url("../images/center_left.jpg") repeat-y top left;
}
#main-content-inner {
    background: url("../images/center_right.jpg") repeat-y top right;
    padding: 1px 10px 1px 17px;
}

/* Content - tables */
#details-table {
    width: 100%;
}

.tableQues {
    width: 100%;
}
#details-table td.formLabels {
    font-family: Cairo;
    font-weight: 900;
    font-size: 13px;
    padding: 0px 3px 3px 0px;
    text-align: left;
    color:white !important;
}

.tableQues td {
	font-family: 'Open Sans',sans-serif,helvetica,arial;
    font-size: 13px;
    padding: 0px 3px 3px 0px;
    text-align: left;
}

#details-table td.formText {
	font-family: Cairo;
    font-size: 12px;
    padding: 0px 0px 3px 3px;
    color:white;
    text-align: left;
}
#details-table td.bigformText {
	font-family: 'Open Sans',sans-serif,helvetica,arial;
    font-size: 12px;
    padding: 0px 0px 3px 3px;
    text-align: left;
}
#details-table td.formFields {
    text-align: left;
    padding: 0px 0px 3px 3px;
    color: #fff !important;
}
#details-table{
	color: #fff !important;
}
#accompanied-table {
    width: 100%;
    margin-top: 20px;
    border-top: 1px solid #E5E5E5;
}
#accompanied-table td {
    padding: 4px;
}
#accompanied-table .tableSubTitle {
    padding: 10px 0px;
    font-weight: bold;
    text-align: center;
}

input#country_of_birth_display,
input#date_of_birth,
input#present_nationality_display,
input#previous_nationality_display,
input#qualification_display,
input#job_title_display,
input#passport_country_of_issue_display,
input#passport_date_of_issue,
input#passport_date_of_expiry,
input#permanent_adrs_country_display,
input#dependent_country_of_birth_1_display,
input#dependent_country_of_birth_2_display,
input#dependent_country_of_birth_3_display,
input#dependent_country_of_birth_4_display,
input#dependent_country_of_birth_5_display,
input#dependent_date_of_birth_1,
input#dependent_date_of_birth_2,
input#dependent_date_of_birth_3,
input#dependent_date_of_birth_4,
input#dependent_date_of_birth_5 {
    float: left;
}
a#country_of_birth_anchor img,
a#date_of_birth_cal_anchor img,
a#present_nationality_anchor img,
a#previous_nationality_anchor img,
a#qualification_anchor img,
a#job_title_anchor img,
a#passport_country_of_issue_anchor img,
a#passport_date_of_issue_cal_anchor img,
a#passport_date_of_expiry_cal_anchor img,
a#permanent_adrs_country_anchor img,
a#dependent_country_of_birth_1_anchor img,
a#dependent_country_of_birth_2_anchor img,
a#dependent_country_of_birth_3_anchor img,
a#dependent_country_of_birth_4_anchor img,
a#dependent_country_of_birth_5_anchor img,
a#dependent_date_of_birth_1_cal_anchor img,
a#dependent_date_of_birth_2_cal_anchor img,
a#dependent_date_of_birth_3_cal_anchor img,
a#dependent_date_of_birth_4_cal_anchor img,
a#dependent_date_of_birth_5_cal_anchor img {
    float: left;
    margin-left: 4px;
}

/* Bottom border */
#bottom-border {
    float: left;
    width: 100%;
}
#bottom-border-left {
    float: left;
    width: 15px;
    height: 19px;
    margin-left: -100%;
    background: url("../images/bottom_left.jpg") no-repeat;
}
#bottom-border-right {
    float: left;
    width: 56px;
    height: 19px;
    margin-left: -56px;
    background: url("../images/bottom_right.png") no-repeat;
}
#bottom-border-floating {
    float: left;
    width: 100%;
    height: 19px;
    background: url("../images/bottom_floating.jpg") repeat-x;
}

/* Bottom separator and buttons */
#bottom-separator {
    float: left;
    width: 100%;
    height: 18px;
    background: url('../images/bottom_separator.gif') repeat-x 0 bottom;
}
#bottom-buttons {
    text-align: right;
}
#bottom-buttons input {
    margin-top: 12px;
}

.selectclass {
	
	width: 250px;
	height: 28px;
    border: 1px solid #c0c0c0;
    padding: 0;
    margin: 0;
    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.smallSelectclass {
	
	width: 120px;
    border: 1px solid #000;
    padding: 0;
    margin: 0;
    height: 28px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


table{counter-reset:section;}
.count:before
{
counter-increment:section;
content:counter(section);
}


/********************contentbox*********************/
.leftloginpage{margin-right:540px; }
.rightloginpage{ width:520px; float:right;}

.leftcontent{width:280px; float:left; }
.rightcontent{ margin-left:290px;}
.loginform{ background-color:#F1F1F1;
  border:1px solid #ccc;
   padding:10px; 
   width:88%;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
 margin:20px auto;
 padding:20px;
}
.loginform form{background-color:#FFFFFF; padding:10px 0 10px 90px;}
.innerform form{background-color:#FFFFFF; padding:10px 0 10px 90px;}

.innerform2 form{background-color:#FFFFFF; padding:10px 0 10px 9px;}

.bordercss{border-top:4px solid #FBA116; width:96%; margin:5px auto;}


.innerbanner {
    float: left;
    position: relative;
    width: 1290px;
}
.innerbanner img {
    position: relative;
}
.innaerbanner_text {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    bottom: 0;
    height: 40px;
    position: absolute;
    width: 100%;
 }
.innaerbanner_text h2 {
    color: white;
    font-family: "OpenSans-Bold";
    margin-top: 3px;
    text-align: center;
}