/**
 * Forms
 * 
 * Some basics, styling of system defaults and input replacements
 * 
 * @section   =forms
 */

/**
 * Prepare new HTML5 elements
 *
 * @subsection   =html5
 */
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section {
    display: block;
}

/**
 * Normalization
 * 
 * It's more a nomalization then a reset.
 *
 * @subsection   =normalization, =reset
 * @see          http://necolas.github.com/normalize.css/
 */
/* Addresses styling not present in IE7/8/9, S5, Chrome. By not specifying a border color it defaults to the text color it inherits. */
abbr[title] {
    border-bottom: 1px dotted;
}
/* Addresses style set to 'bolder' in FF3/4, S4/5, Chrome. */
b, strong {
    font-weight: bold;
}
/* Normalize blockquote margins, which differ between modern browsers and IE6/7. */
blockquote {
    margin: 1em 40px;
}
/* Addresses styling not present in S5, Chrome. */
dfn {
    font-style: italic;
}
q {
    quotes: none;
}
q:before, q:after {
    content: "";
    content: none;
}
/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
/* Improve image quality when scaled in IE7: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}
figure {
    margin: 0;
}

/* Links with icons */
a.action, span.action {
    display: inline-block;
    position: relative;
    padding-left: 9px;
    text-decoration: none;
}
a.action span, span.action span {
    position: absolute;
    top: 3px;
    left: 0;
    width: 5px;
    height: 9px;
    overflow: hidden;
    text-indent: -9999em;
    background: url("../../designs/eso/resources/forms/icons-sprite.gif") no-repeat -20px -699px;
}
a.action .hidden {
    position: absolute;
    top: auto;
    left: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/**
 * Lists
 *
 * @subsection   =lists
 */
ul.error-list {
    margin: 1em 0;
    padding: 0 0 0 40px;
}
.ie6 .rich-content ol li{
    display:inline-block;
}
dd {
    margin: 0 0 0 40px;
}
nav ul, nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/**
 * Back & forth
 * 
 * Semantic name for "left-aligned" and "right-aligned" ;-)
 *
 * @subsection   =back, =forth
 */
.back {
    float: left;
}
.forth {
    float: right;
}



/**
 * Skiplinks
 *
 * Skiplinks for better accessibility
 *
 * @section   =skiplinks
 */
#skiplink {
    color: #FFF;
}
#skiplink:focus, #skiplink:active {
    display: block;
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 1000; /* To overlap the logo (1000 is in general our value to "overlap anything") */
    padding: 10px 20px;
    background: #0975E9;
}



/**
 * Grid
 *
 * Grid stuff that we can use at nearly every place where the five column
 * grid system is in use.
 *
 * @section   =grid
 */
.gridelement { float: left; } /* Wanted to call this "grid" but CQ5 needs "gridelement" */
.g1of1 { width: 100%; }
.g1of2 { width: 50%; }
.g1of3 { width: 33.3333%; }
.g2of3 { width: 66.6667%; }
.g1of4 { width: 25%; }
.g3of4 { width: 75%; }
.g4of4 { width: 100%; }
.g1of5 { width: 20%; }
.g1p5of5 { width: 30%; }
.g1p5of4 { width: 37.5%; }
.g2p5of4 { width: 62.5%; }
.g2of5 { width: 40%; }
.g3of5 { width: 60%; }
.g4of5 { width: 80%; }

/* IE6/7 is facing subpixel errors here in some cases:
 * ejohn.org/blog/sub-pixel-problems-in-css/
 * 
 * We try to fix this by using percentage values that force IE to round
 * the absolute pixels down.
 */
.ie6 .gridelement, .ie7 .gridelement { overflow: hidden; }
.ie6 .g1p5of5, .ie7 .g1p5of5 { width: 29.99%; }
.ie6 .g1of2, .ie7 .g1of2 { width: 49.99%; }

/* Clearfix */
.group:before, .group:after {
    content: "";
    display: table;
}
.ie6 .group.IEclear{
    clear:both;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}
.ie6 .group {
    zoom: 0;
}

/**
 * Non-semantic helper classes
 *
 * Styles should be defined before this section.
 *
 * @section   =helper
 */

/* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility 
 * The no-js-away class allows the hiding of specific js-dependent elements from screenreaders if js isn't activated
 */
.no-js .no-js-away,
.away {
    display: none;
    visibility: hidden;
}
/* Hide only visually, but have it available for screenreaders: www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.hidden.focusable:focus,
.hidden.focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    margin: 0;
    clip: auto;
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
    visibility: hidden;
}

/**
 * SWF object
 *
 * @see http://code.google.com/p/swfobject/wiki/faq
 * @section   =swfobject
 */
object {
    display: block;
    outline: none;
}



/**
 * Quotes
 *
 * @section   =quotes
 */
blockquote {
    color: #737373;
    font-style: italic;
}
blockquote:before,
blockquote:after {
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1;
}
blockquote:before {
    content:"\201C";
}
blockquote:after {
    content:"\201D";
}



/**
 * Footnotes and Markers
 *
 * @section   =footnote
 */
 
/* Markers */
a.footnote-marker,.expandables-controls a.footnote-marker {
    color: #969696;
    font-family: Arial, sans-serif;
    text-decoration: none;
    background: none;
    display: inline;
    padding: 0;
}
.expandables-controls a.footnote-marker:hover,
.expandables-controls a.footnote-marker:active,
.expandables-controls a.footnote-marker:focus{ 
    background: none;
    padding: 0;
    border: medium none;
}
a.footnote-marker:hover,
a.footnote-marker:active,
a.footnote-marker:focus {
    color: #0975E9;
    outline: 0;
}
/* Footnotes */
.footnotes {
    padding: 0;
    color: #969696;
    font-family: Arial, sans-serif;
    font-size: 92%;
    line-height: 1.455;
}
.table .footnotes {
    padding: 0;
}
.footnotes .footnotes-heading {
    padding: 0 0 2px 0;
    color: #969696;
    font-family: Arial, sans-serif;
    font-size: 100%;
    font-weight: bold;
    line-height: 1.455;
}
.footnotes a.footnote {
    color: #969696;
    text-decoration: none;
}
.footnotes a.footnote:hover,
.footnotesa.footnote:active,
.footnotes a.footnote:focus {
    color: #0975E9;
    outline: 0;
}
.footnotes .footnotes-list {
    margin: 0;
    line-height: 1.2;
}
.footnotes .footnotes-list li {
    padding: 0;
    margin: 0 0 1px 0;
    list-style: none;
    background: none;
}
.footnotes .footnotes-list p{
    margin: 0;
}



/* Additional stylings */
span.h-alt-color {
    color: #0975E9;
}
h2.intranet-news-title {
    margin-top: -5px;
    padding-left: 10px;
}

/*change for sup-2503*/
.flash{
    margin-bottom:0px;
    margin-top: 0px;
}
.centerAlign {
    text-align: center;
}
.linkbtn .button {
    font-weight: bold;
}
#inPageElement {
    background-color:#FFF;
    height:auto;
    padding:0 0 10px;
    position:relative;
    top:0;
    width:100%;
}
#inPageElement .CookieBox.inpage {
    border-bottom:1px solid #C4C4C4;
    font-family:Arial, sans-serif;
    font-size:12px;
    padding:4px 5px 8px 40px;
    position:relative;
    display:inline-table;
}
.oldie #inPageElement .CookieBox.inpage {
    width:916px;
}
.CookieBox .CookieBoxIntro {
    color:#707070;
    display:table-cell;
    font-weight:normal;
    line-height:18px;
    margin:0;
    padding: 0 10px 0 0;
    vertical-align:middle;
    width:57%;
    
}
.oldie .CookieBox .CookieBoxIntro {
    float:left;
}
.ie8 .CookieBox .CookieBoxIntro {
    width:508px;
}
.rightSection {
    display:table-cell;
    vertical-align:bottom;
    width:394px;
}
.oldie .rightSection {
    width:auto;
    text-align:left;
    padding-right:5px;
}
.CookieBox .btn {
    background:none repeat scroll 0 0 #0975E9;
    border:1px solid #D30D01;
    border-radius:4px 4px 4px 4px;
    color:#FFF;
    cursor:pointer;
    display:inline-block;
    font-weight:bold;
    margin-top:7px;
    padding:3px 10px;
    text-decoration:none;
}
.ie7 .CookieBox .btn, .ie6 .CookieBox .btn {
    padding:2px 3px;
}
.ie8 .CookieBox .btn {
    padding:4px 13px;
}
.oldie .CookieBox .CookieBoxIntro {
    padding-top:5px;
}
.boxclose {
    position:absolute;
    right:10px;
    top:5px;
    padding-right:21px;
    position:absolute;
    text-decoration:none;
    cursor:pointer;
}
.boxclose span {
    background:url("cssforms/static/images/icons-sprite.gif") no-repeat scroll 0 -1051px;
    display:block;
    height:16px;
    margin-top:-8px;
    overflow:hidden;
    position:absolute;
    right:0;
    top:50%;
    width:16px;
}
.moreInfo {
    background:url("cssforms/static/images/icons-sprite.gif") no-repeat scroll 0 -151px;
    margin-left:20px;
    padding-left:10px;
    text-decoration:none;
    cursor:pointer;
}
.oldie .moreInfo {
    background-position:0 -150px;
}
.CookieBoxNO.btn.btn-danger {
    margin-left:22px;
}
#inPageElement .rightSection{ 
    text-align:right;
}
#inPageElement .rightSection a.moreInfo{
    float:left;
}
.CookieBox .cookienote-container div.cookie-close-button {
    position:absolute;
    right:3px;
    top:4px;
}
.close {
    background-image:url("cssforms/static/Images/icons/generic/close.gif");
    background-position:0 50%;
    background-repeat:no-repeat;
    min-height:23px;
}
.cookie-notice .cookienote-container div.cookie-close-button a.close {
    display:inline-block;
    font-size:11px;
    margin:0;
    outline:medium none;
    padding:2px 0 6px 5px;
    width:105px;
    background-position:right top;
}
.oldie .cookie_disclaimer .rightSection{
    width: 394px;
}
a.button, div.linkbtn a.action {
    background: none repeat scroll 0 0 #0975E9;
    border: 1px solid #0123D3;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    display: inline-block;
    padding: 4px 13px 3px;
    text-decoration: none;
    font-weight:bold;
}
div.linkbtn{
    display: inline-block;
    width: 100%;
    padding: 15px 0;
}
div.linkbtn a.action span{
    display:none;
}
div.linkbtn .pdfbtn{
    display:none;
}


#inPageElement.cookieType_1 .rightSection a.moreInfo{
    float: right;
    margin-top: 14px;
}
#inPageElement.cookieType_1 .rightSection .btn {
    float:left;
}

/* Zero out the border, margin, and padding */
form {
    margin: 0;
    padding: 0;
}
fieldset {
    margin: 0;
    border: 0;
    padding: 0;
}
/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */
legend {
    border: 0;
    padding: 0;
}
.ie6 legend, .ie7 legend {
    margin-left: -7px;
}
/* Indicate that 'label' will shift focus to the associated form element */
label {
    cursor: pointer;
}
/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */
input.text, select, textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: white!important;
}

input.form_button_submit {
    background:#005BA0!important;
}

.ie6 input, .ie6 select, .ie6 textarea,
.ie7 input, .ie7 select, .ie7 textarea {
    vertical-align: middle;
}
/* Set a disabled styling for the selects */
select.disabled {
    color: #969696;
    background: #E6E6E6;
}
/* Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) */
input {
    line-height: normal;
}
/* Correct inner spacing displayed oddly in IE6/7 */
.ie6 input, .ie7 input {
    overflow: visible;
}
/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */
input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}
/* Consistent box sizing and appearance */
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
}
input[type="search"] {
       -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
}
/* Remove inner padding and border in FF3/4: www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea {
    overflow: auto;
    vertical-align: top;
}
/* Input fields with errors */
input.text-error,
input.password-error,
textarea.error {
    background-color: #FF0000 ;
}

/**
 * System defaults
 *
 * @subsection   =system
 */

/* Overlabeling (works only when JS is enabled) */
.js label.overlabel {
    position: absolute;
    top: 2px;
    left: 4px;
    margin: 0;
    cursor: text;
    color: #969696;
}
.js label.focus {
    color: #CECECE;
}

/* Remove italic stying for em */
form em {
    font-style: normal;
}

/* Help functionality */

form .qaform_help_text{
     display:none;
}

form a.help-headline {
    margin: 18px 0 0 -3px;
}

/* General approach for the pattern "labels left, inputs right" */
form .row {
    clear: both;
    padding: 0 20px 6px;
}
form .row .label {
    float: left;
    width: 135px;
    padding: 4px 10px 4px 0;
}
form .row .input {
    float: left;
    width: 350px;
}

/* Tooltip */
form .row .tooltip{
	display: inline;
	position: relative;
	text-decoration: underline;
	color: #005BA0;
}

form .row .tooltip:hover:after{
	background: #DEDEDE;
	border-radius: 5px;
	top: 26px;
	color: #005BA0;
	content: attr(content);
	left: 10px;
	padding: 5px 15px;
	position: absolute;
	z-index: 98;
	width: 220px;
}

form .row .tooltip:hover:before{
	border: solid;
	border-color: #DEDEDE transparent;
	border-width: 0 6px 6px 6px;
	top: 20px;
	content: "";
	left: 35%;
	position: absolute;
	z-index: 99;
}

/* Single input box */
form .row .choose-single {
    padding: 4px 10px 14px 0;
}
form .row .choose-single input,
form .row .choose-single label {
    float: left;
}

form .row .choose-single p {
	margin: 0;
}

form .row .choose-single label{
    width:275px;
}

form .row .choose-single a.help {
    margin-top: -1px;
}

/* List of input boxes */
form ul.choose {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    list-style: none;
}

/* General approach for the submit area of a form */
form .submit, .submit {
	padding: 15px 10px 0 0;
    display: block ;
	/*margin-bottom: 5px; Commenting As this is not as per the prototypes */
}
form .submit a.action {
    margin-top: 5px;
}

/**
 * Replacements
 *
 * We style elements only when JS is enabled (the fancy-forms class is set in
 * scripts/eso.fancyForms.js).
 *
 * Reason is that only in that case we are able to style checkboxes,
 * radio buttons, dropdowns and buttons as well (because we need JS for
 * it). Thus the styling remains consistent: System defaults without JS,
 * fancy forms with JS.
 * 
 * - For standard input fields and textareas pure CSS is used
 * - Checkboxes and radio buttons are replaced via a self-made script
 *   and styled via CSS
 * - Select fields are replaced via the jQuery UI Selectmenu Widget and styled via CSS
 * - Buttons are replaced by anchors and styled via CSS
 *
 * @subsection   =form-replacements
 * @see          github.com/fnagel/jquery-ui/wiki/Selectmenu
 * @see          jsfiddle.net/fnagel/GXtpC/embedded/result/
 */

/* Standard input fields and textareas */
.fancy-forms input.text,
.fancy-forms input.password {
    border: 1px solid #B9B9B9;
    padding: 2px 3px 3px;
}
.fancy-forms textarea {
    border: 1px solid #B9B9B9;
    padding: 2px 3px 3px;
}
.fancy-forms input.text-error,
.fancy-forms input.password-error,
.fancy-forms textarea.error {
    border-color: #FF0000;
}
div.select-error a.ui-selectmenu{
    background-color: #FAE9E8;border-color:#FF0000;
}

/* Checkboxes and radio buttons */
.fancy-forms label.checkbox,
.fancy-forms label.radio {
    display: block;
}
.fancy-forms label.checkbox span,
.fancy-forms label.radio span {
    display: block;
    width: 14px;
    height: 14px;
    overflow: hidden;
    margin-right: 4px;
    margin-left: 145px;
    margin-top: -16px!important;
    background: url("../../designs/eso/resources/forms/form-sprite.gif") no-repeat 0 0;
}
.fancy-forms label.checkbox span { background-position: 0 0 }
.fancy-forms label.checkbox-focus span { background-position: -20px 0 }
.fancy-forms label.checkbox-checked span { background-position: -40px 0 }
.fancy-forms label.checkbox-checked-focus span { background-position: -60px 0 }
.fancy-forms label.checkbox-disabled span { background-position: -80px 0 }
.fancy-forms label.checkbox-disabled-focus span { background-position: -100px 0 }
.fancy-forms label.checkbox-disabled-checked span { background-position: -120px 0 }
.fancy-forms label.checkbox-disabled-checked-focus span { background-position: -140px 0 }
.fancy-forms label.radio span { background-position: 0 -20px }
.fancy-forms label.radio-focus span { background-position: -20px -20px }
.fancy-forms label.radio-checked span { background-position: -40px -20px }
.fancy-forms label.radio-checked-focus span { background-position: -60px -20px }
.fancy-forms label.radio-disabled span { background-position: -80px -20px }
.fancy-forms label.radio-disabled-focus span { background-position: -100px -20px }
.fancy-forms label.radio-disabled-checked span { background-position: -120px -20px }
.fancy-forms label.radio-disabled-checked-focus span { background-position: -140px -20px }


.blx-bank-account div.radio .row label.radio{
    display: inline-block;
    margin-right:15px;
}



/* Select fields */
.ui-selectmenu {
    display: block;
    display: inline-block;
    position: relative;
    width: 276px!important;
    overflow: hidden;
    border: 1px solid #B9B9B9;
    text-decoration: none;
    vertical-align: middle;
    background: #FFF;
    zoom: 1;
}
.ui-selectmenu-icon {
    display: block;
    position: absolute;
    top: 50%;
    right: 6px;
    width: 9px;
    height: 5px;
    overflow: hidden;
    margin-top: -3px;
    text-indent: -9999em;
    background: url("../../designs/eso/resources/forms/form-sprite.gif") no-repeat 0 -40px;
}
.ui-selectmenu-menu {
    display: none;
    position: absolute;
    top: 0;
    z-index: 1005; /* z-index: 1005 to make selectmenu work with dialog */
    margin-top: -1px;
    border: 1px solid #B9B9B9;
    border-top: 0;
    padding: 0;
    color: #5D5D5D;
    background: #FFF;
}
.ui-selectmenu-menu ul {
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ui-selectmenu-menu li {
    display: block;
    margin: 0;
    padding: 0;
}
.ui-selectmenu-open {
    display: block;
}
.ui-selectmenu-status,
.ui-selectmenu-menu li a {
    display: block;
    padding: 2px 21px 2px 4px;
    outline: none;
    min-height: 19px;
    color: #5D5D5D;
    text-decoration: none;
}
.ui-selectmenu-menu li a {
    color: #5D5D5D;
}
.ui-selectmenu-open li.ui-selectmenu-item-selected a {
    color: #5D5D5D;
    background: #E6E6E6;
}
.ui-selectmenu-menu li.ui-state-hover a,
.ui-selectmenu-open li.ui-selectmenu-item-focus a {
    color: #FFF;
    background: #0975E9;
}
.ui-state-disabled,
.ui-selectmenu-menu li.ui-state-disabled a {
    border-color: #DEDEDE;
    color: #AAA;
    cursor: default;
}
/* For optgroups */
.ui-selectmenu-menu .ui-selectmenu-group { }
.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label {
    font-weight: bold;
}
.ui-selectmenu-menu .ui-selectmenu-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Multiselect */
.ui-multiselect {
    display: block;
    display: inline-block;
    position: relative;
    border: 1px solid #B9B9B9;
    text-decoration: none;
    vertical-align: middle;
    background: #FFF;
    zoom: 1;
}
.ui-multiselect ul {
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ui-multiselect li {
    display: block;
    margin: 0;
    padding: 0;
}
.ui-multiselect li a {
    display: block;
    border: 1px solid #FFF;
    padding: 1px 20px 1px 3px;
    outline: none;
    color: #5D5D5D;
    text-decoration: none;
    background: #FFF;
}
.ui-multiselect li a:visited {
    color: #5D5D5D;
}
.ui-multiselect li.ui-multiselect-item-selected a {
    border: 1px solid #E6E6E6;
    color: #5D5D5D;
    background: #E6E6E6;
}
.ui-multiselect-focus li.ui-multiselect-item-focus a {
    color: #5D5D5D;
    background: #FFF;
}
.ui-multiselect-focus li.ui-multiselect-item-selected a,
.ui-multiselect li.ui-multiselect-item-hover a {
    border: 1px solid #0975E9;
    color: #FFF;
    background: #0975E9;
}
.ui-multiselect-focus li.ui-multiselect-item-selected a:visited,
.ui-multiselect li.ui-multiselect-item-hover a:visited {
    color: #FFF;
}
.ui-multiselect-focus li.ui-multiselect-item-focus a {
    border: 1px dotted #393939;
}
.ui-multiselect-disabled li a,
.ui-multiselect-disabled li.ui-multiselect-item-selected a,
.ui-multiselect-disabled li.ui-multiselect-item-hover a,
.ui-multiselect-disabled li.ui-multiselect-item-focus a {
    border-color: #E6E6E6;
    color: #969696;
    cursor: default;
    background: #E6E6E6;
}
.ui-multiselect-disabled li a:visited,
.ui-multiselect-disabled li.ui-multiselect-item-selected a:visited,
.ui-multiselect-disabled li.ui-multiselect-item-hover a:visited,
.ui-multiselect-disabled li.ui-multiselect-item-focus a:visited {
    color: #969696;
}

/* Datepicker */
/* Hide <div> which contains the to be replaced <selects> immediately if JS is enabled */
.js div.datepicker {
    display: none;
}
.ui-datepicker-trigger {
    float: left;
    margin: 2px 0 2px 10px;
    cursor: pointer;
    vertical-align: bottom;
    padding: 0 !important;
}
.ui-datepicker { 
    display: none;
    width: 178px;
    border: 1px solid #AAA;
    background: #FFF;
}
.ui-datepicker-header { 
    position: relative;
    height: 20px;
    font-weight: bold;
}
.ui-datepicker-prev,
.ui-datepicker-next {
    position:absolute;
    width: 20px;
    height: 20px;
    overflow: hidden;
    cursor: pointer;
    text-indent: -9999em;
    background: #FFFFFF url("../../designs/eso/resources/forms/datepicker-sprite.gif") no-repeat 0 0;
}
.ui-datepicker-prev {
    left: 0;
}
.ui-datepicker-next {
    right: 0;
    background-position: 0 -200px;
}
.ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center; 
}
.ui-datepicker table {
    width: 168px;
    margin: 0 5px 14px 5px;
    border-collapse: collapse;
}
.ui-datepicker th { 
    width: 24px;
    padding: 0;
    text-align: center;
    font-weight: bold;
    border: 0;  
}
.ui-datepicker td { 
    padding: 0;
    border-bottom: 0;
}
.ui-datepicker td span,
.ui-datepicker td a { 
    display: block;
    height: 15px; 
    padding: 0;
    text-align: center;
    text-decoration: none;
}
/* Overwrite rules from tables.css */
.ui-datepicker tbody tr:hover th,
.ui-datepicker tbody tr:hover td {
    background: none;
}
/* Prevent colliding with other modules */
.ui-datepicker-calendar thead th {
    width: 24px;
    height: 20px;
    padding-bottom: 0;
    vertical-align: bottom;
}
.ui-datepicker-calendar th {
    border: 0 none;
    font-weight: bold;
    text-align: center; 
}
.ui-datepicker-calendar th span {
    display: inline;
    margin-right: 0;
    padding-left: 0;
    border: 0 none;
    background: none;
}
.ui-datepicker-calendar a.ui-state-default {
    color: #5D5D5D;
}
.ui-datepicker-calendar a.ui-state-highlight,
.ui-datepicker-calendar a.ui-state-hover {
    color: #FFF;
    background: #0975E9;
}
.box-shadow {
  -webkit-box-shadow: 3px 5px 6px #AAA; /* Saf3-4 */
     -moz-box-shadow: 3px 5px 6px #AAA; /* FF3.5 - 3.6 */
          box-shadow: 3px 5px 6px #AAA; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
}
/* IE6 Fixes */
.ie6 .ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}

/* Autocomplete */
.ui-autocomplete {
    display: block;
    position: absolute;
    float: left;
    margin: 0;
    border: 1px solid #B9B9B9;
    border-top: 0;
    padding: 1px 0 0 0;
    list-style: none;
    cursor: default;
    background: #FFF;
}
.ui-autocomplete a {
    display: block;
    padding: 3px;
    margin-bottom: 1px;
}
.ui-autocomplete a.ui-state-hover,
.ui-autocomplete a.ui-state-active {
    background: #F5F5F5;
}
.ui-autocomplete a b {
    font-weight: bold;
}
/* Tiny adjustment for global search in the header */
#header .meta form.search .ui-autocomplete a {
    padding: 3px 5px 3px 8px;
}
/* Remove outline when focused (conflicts visually with the autocomplete list) */
.js input.autocomplete:focus {
    outline-width: 0;
}
/* IE6 Fixes */
.ie6 .ui-autocomplete {
    width: 1px;
}
.ie6 .ui-autocomplete a {
    zoom: 1;
}

/* Buttons */
a.button {
    display: inline-block;
    border: 1px solid #0123D3;
    padding: 4px 13px 3px;
    -moz-border-radius: 4px; /* Workaround for FF<4 */
         border-radius: 4px;
    color: #FFF;
    text-decoration: none;
    background: #0975E9;
	cursor: pointer;
}
a.button:visited {
    color: #FFF;
}
a.button:hover,
a.button:focus,
a.button:active {
    text-decoration: underline;
}
a.button-disabled {
    border-color: #B9B9B9;
    background: #CECECE;
}



/**
 * Form component in the content area
 *
 * @subsection   =content
 */
form.content {
    margin: 21px 65px 21px 30px;
   	width: 600px;
   	background: #F5F5F5;
}

/* Legend of a form, mostly used for explanation of the asterisk */
form.content p.legend {
    margin: 0 0 -4px;
    padding: 17px 10px 0;
    background: #F5F5F5;
}
form.content p.legend-error {
    margin-bottom: 0;
    padding-bottom: 15px;
}

/* Section */
form.content section {
    border-bottom: 1px solid #FFF;
	display:inline-block;
    width:100%;
}
form.content section h3 {
    float: left;
    padding: 18px 10px 0 10px!important;
    color: #005BA0;
    font-family: Arial, sans-serif;
    font-size: 100%;
    font-weight: bold!important;
}

/* Hint (used for error messages) */
form .hint {
    position: relative;
    min-height: 26px;
    padding: 14px 10px 10px 42px;
    color: #FFF;
    font-weight: bold;
    background: #0975E9;
}
/* IE6 fixes */
.ie6 form .hint {
    height: 26px;
    zoom: 1;
}
form .hint a:link,
form .hint a:visited,
form .hint a:hover,
form .hint a:focus,
form .hint a:active {
    color: #FFF;
}
form .hint .icon {
    display: block;
    position: absolute;
    top: 14px;
    left: 22px;
    width: 12px;
    height: 26px;
    background: url("../../designs/eso/resources/forms/icons-sprite.gif") no-repeat 0 -1377px;
}
form .hint p,
form .hint ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Labels for the inline validation */
form.content label.error {
    display: block;
    float: left;
    width: 18px;
    height: 14px;
    overflow: hidden;
    margin: 3px 0 0 10px;
    cursor: default;
    text-indent: -9999em;
    background: url("../../designs/eso/resources/forms/icons-sprite.gif") no-repeat 0 -1343px;
}
form.content label.checked {
    background-position: 0 -1309px;
}

form.content label.checked-zip {
    margin-right: 10px;
    margin-left: 0;
}

/* Counter below textareas */
form.content p.counter {
    clear: both;
    margin: 0;
    padding: 8px 0 4px;
    color: #707070;
}

/* Explicit styling of input fields and textareas */
form.content input.text,
form.content input.password {
    float: left;
    width: 271px;
}
.ie6 form.content input.text{
	overflow:hidden;
}
form.content textarea {
    float: left;
    width: 400px;
    height: 103px;
}
form.content input.zip {
    width: 51px;
    margin-right: 10px;
}
form.content input.city {
    width: 103px!important;
}
form.content .blx-zip-code input.city {
    margin-left:0;
    margin-right:10px;
}

form.content input.city-zip-checked {
    width: 175px!important;
}

/* Special styling for upload fields */
form.content .input-file {
    position: relative;
    float: left;
    padding-right: 26px;
}
form.content .input-file input {
    width: 100%;
}
form.content .input-file a.help {
    position: absolute;
    top: 3px;
    right: 0;
    float: none;
    margin: 0;
}

/**
 * reCAPTCHA
 * The IDs and classes are the proposed ones from Google
 * (see developers.google.com/recaptcha/docs/customization). We're not
 * changing this to make everybody's life easier :)
 */
#recaptcha_image {
    width: 323px;
    overflow: hidden;
    float: left;
    margin: 10px 10px 4px 0;
    border: 1px solid #B9B9B9;
    padding: 15px 13px 15px 10px;
    background: #FFF;
}
#recaptcha_options {
    width: 16px;
    height: 87px;
    position: relative;
    margin: 10px 0 4px 335px;
}
#recaptcha_options a {
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    overflow: hidden;
    text-indent: -9999em;
    background: url("../../designs/eso/resources/forms/icons-sprite.gif") no-repeat 0 -1423px;
}
#recaptcha_options a.reload {
    top: 0;
    background-position: 0 -1993px;
}
#recaptcha_options a.audio {
    top: 26px;
    background-position: 0 -2029px;
}
#recaptcha_options a.image {
    top: 26px;
    background-position: 0 -2065px;
}

/**
 * Widths for custom select fields
 * 
 * Custom select fields get an automatic width by default. If you want
 * to specify a width for a custom select you can do it like the
 * following. Remember to add the .fancy-forms selector at the beginning
 * of the statement, otherwise the system select will be styled as well.
 */
/* Custom select fields must float */
.fancy-forms form.content .select {
    float: left;
}
.fancy-forms form.content div.select-day,
.fancy-forms form.content div.select-month {
    margin-right: 10px;
}
/* All select fields in the standard form component get the width of
   normal input fields and textareas */
.fancy-forms form.content select {
    width: 178px;
}
/* Special widths when we want to define a date with selects */
.fancy-forms form.content select.select-day,
.fancy-forms form.content select.select-month {
    width: 43px;
}
.fancy-forms form.content select.select-year {
    width: 68px;
}

/* Submit area */
form.content .submit-small {
    border-top: 12px solid #F5F5F5;
}

/* Special styling for small forms */
form.content-small {
    padding-top: 18px;
}
form.content-small p.legend {
    padding-top: 0;
    padding-bottom: 15px;
}

form.content-small .hint {
    border-bottom: 18px solid #F5F5F5;
}

form.content-small .submit {
  /*  border-top: 12px solid #F5F5F5; Commenting as this is not as per Prototypes */
}
.calculatelink{
    display: block;
    padding: 0 0 24px 165px;
    clear:both;
}
form#berechnung div.input strong{
    display: inline-block;
    padding: 3px 0 0 5px;
    float:left;
}
.signature{
    display:inline-block;
    width:100%;
    padding-top:40px;
}
.signature div{
    width:47%;
    border-top:1px solid #808080;
    padding-top:12px;
}
.ie6 .signature div{
    width:45%;
}
.signature div.employee{
    float:left;
    margin-left:10px;
}
.signature div.manager{
    float:right;
    margin-right:10px;
}
.formError{
    border:1px solid #ff0000 !important;
}
form#berechnung div.input{
    width:auto;
}
form#berechnung div.input{
	width:238px;
}
.ie6 form#berechnung div.input{
	width:238px;
}
form#berechnung div.input label.error{
    float:right;
}
.ie6 form#berechnung .input strong, .ie7 form#berechnung .input strong{
    margin-top:-13px;
    padding-top:0px !important;
}
.ie6 form#berechnung .input label.error, .ie7 form#berechnung .input label.error{ 
    margin-top:3px !important;
    padding-top:0px !important;
}

/**
 * Clearfix
 *
 * @subsection   =clearfix
 * @see          nicolasgallagher.com/micro-clearfix-hack/
 */
form .row:before, form .row:after,
form .submit:before, form .submit:after,
form .row .choose-single:before, form .row .choose-single:after,
form ul.choose li:before, form ul.choose li:after,
form .recaptcha:before, form .recaptcha:after,
form.content:before, form.content:after {
    content: "";
    display: table;
}
form .row:after,
form .submit:after,
form .row .choose-single:after,
form ul.choose li:after,
form .recaptcha:after,
form.content:after {
    clear: both;
}
form .row,
form .submit,
form .row .choose-single,
form ul.choose li,
form .recaptcha,
form.content {
    zoom: 1;
}

form ul.choose li {
    margin-left: 0px!important;
    margin-top: 10px!important;
}

form .category {
    margin-top: 30px;
}

.section.multistepnavigation{
    padding-left: 30px;padding-right: 65px;
}
.formtab {
    background: none repeat scroll 0 0 #f6f6f6;
    border: 1px solid #f6f6f6;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    position: relative;
    text-align: center;
    padding:0px 3px;
    zoom: 1;
    *display: inline; 
    color:#cfcfcf;  
}
.formtab.active{
    background:#fff;border-color:#cecece;color:#F21C0A;
}

.formtab > span {
    background: url("../../designs/eso/resources/forms/tab-arrow-grey.jpg") no-repeat 0 0;
    display: block;
    height: 32px;
    position: absolute;
    right: -14px;
    top: -1px;
    width: 23px;
    z-index: 1;
    overflow:visible!important;
}
.formtab.active > span,.formtab.last.active > span {
    background: url("../../designs/eso/resources/forms/last-active.jpg") no-repeat scroll 0 0;
    left: -5px;
    width: 26px;
}
.formtab.last > span {
    background: none;
}
.formtab.active > span.l-arrow {
    background: url("../../designs/eso/resources/forms/tab-arrow.jpg") no-repeat scroll 0 0;
    left: auto;
    width: 23px;
}
.formtab.first.active > span {   
    background: url("../../designs/eso/resources/forms/tab-arrow.jpg") no-repeat 0 0;
    left: auto;
     right: -18px;
    z-index: 2;
}
.multistepsummary .row div.label{
    font-weight:bold;
}
.multistepsummary .row div.input{
    padding: 4px 10px 4px 0;
    color:#969696;
}
.multistepsummary section.section a.button{
     background: url("../../designs/eso/resources/forms/icons-sprite.gif") no-repeat scroll -20px -696px;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #000000;
    font-weight: normal;
    padding: 0 0 0 12px;
}
.multistepsummary section.section a.button:hover{
    color: #0975E9;
    text-decoration:none;
}
form.content.multistepsummary section{
    border-bottom: medium none;
}
form.content.multistepsummary section {
    padding: 0 0 0;
}
form.content.multistep section .radio h3{
    color:#5d5d5d;
    padding:0 0 0 10px;
    clear: both;
}
form.content.multistep section .radio a.help-headline {
    margin: 7px 0 0 5px;
}
.blx-bank-account div.input label, .blx-zip-code div.input label{
	  display:none !important;
}
.blx-bank-account div.input span.error{
    background: url("../../designs/eso/resources/forms/icons-sprite.gif") no-repeat scroll 0 -1343px rgba(0, 0, 0, 0);
    cursor: default;
    display: block;
    float: left;
    height: 14px;
    margin: 3px 0 0 10px;
    overflow: hidden;
    text-indent: -9999em;
    width: 18px;
}
.blx-bank-account div.input span.checked{
	background: url("../../designs/eso/resources/forms/icons-sprite.gif") no-repeat scroll 0 -1309px rgba(0, 0, 0, 0);
    cursor: default;
    display: block;
    float: left;
    height: 14px;
    margin: 3px 0 0 10px;
    overflow: hidden;
    text-indent: -9999em;
    width: 18px;
}

.formtab.active > span {
    left: -10px;
}

.multistep .section.row > h2{
    margin: 0 10px;
}
.multistep p.legend-error{
    padding-left:10px;
}