/* =Welcome, consists of a number of different styles for userLogin, forgotten passwords etc.
Some styles are shared however most have there own section e.g. userLogin 

/*------- =userLogin =password =registration --------*/

#register,
#updateProfile,
#userLogin,
#password,
#changePassword,
#success,
#profileUpdateSuccess,
#unsupportedBrowser,
#pageNotFound,
#pageError {
    padding: 6px;
    min-height: 21em;
    }
    
#changePassword,
#profileUpdateSuccess {min-height: 5em;}
    
#unsupportedBrowser p,
#pageNotFound p,
#pageError p,
#success p,
#profileUpdateSuccess p {margin-bottom: 6px; line-height: 1.6em;}

#unsupportedBrowser ul,
#pageNotFound ul {padding-bottom: 6px;}

#unsupportedBrowser li,
#pageNotFound li {margin: 0 0 3px 11px; list-style-type: square;}

#register #B2B_Site,
#OLC2UserMessage {
    margin: 6px 0 16px 0;
    padding: 6px;
    border: 1px dotted #EEE;
    }
    
#register #B2B_Site h2,
#rightLoginDetail h2,
#OLC2UserMessage h2 {
    margin-bottom: 0;
    display: inline;
    color: #BD282E; 
    letter-spacing: 1px;
    border-bottom: none; 
    }
    
#register #B2B_Site p,
#OLC2UserMessage p {display: inline; line-height: 1.4em;}

#register #B2B_Site p.displayBlock {margin-top: 6px; display: block;}

#register fieldset fieldset,
#updateProfile fieldset fieldset {margin-top: 8px;}
    
/*I've added divs around groups of input fields and their labels because they're
used in pages with different widths, some will have 3 field groups in a row, whilst
others will have two fields in a row, it makes things easier if they are floated groups*/

#register div.floatFieldItem,
#updateProfile div.floatFieldItem,
#userLogin div.floatFieldItem,
#password div.floatFieldItem,
#changePassword div.floatFieldItem,
#register div.floatFieldItemSecondRow,
#updateProfile div.floatFieldItemSecondRow,
#register div.floatFieldItemSecondRowSpecialSelect,
#updateProfile div.floatFieldItemSecondRowSpecialSelect,
#register div.floatFieldItemSecondRowTextarea,
#updateProfile div.floatFieldItemSecondRowTextarea,
#register div.floatFieldItemSpecial,
#updateProfile div.floatFieldItemSpecial {
    padding-right: 20px; 
    width: 19em;
    min-height: 6em;
    float: left;
    }
    
/*Set to width: 21.4em; for Firefox and Safari to fix a bug. On the IE stylesheet these
style changes have reverted back to their original width and padding above*/
#register div.floatFieldItemSecondRowSpecialSelect,
#updateProfile div.floatFieldItemSecondRowSpecialSelect {width: 21.4em; padding-right: 0;}
    
#updateProfile div.floatFieldItemSecondRowSpecialSelect {padding-right: 8px;}

/*Set to width: 17.4em; for Firefox and Safari to fix a bug. On the IE stylesheet these
style changes have reverted back to their original width and padding above*/
#register div.floatFieldItemSecondRowTextarea {
    width: 17.4em;
    padding-right: 0;
    padding-left: 10px;
    }
    
#updateProfile div.floatFieldItem,
#updateProfile div.floatFieldItemSecondRow {padding-right: 3em;}
    
#userLogin div.floatFieldItem {
    margin-bottom: 6px;
    padding-right: 0;
    min-height: 0;
    clear: left;
    }

#register div.floatFieldItemSecondRow,
#updateProfile div.floatFieldItemSecondRow,
#register div.floatFieldItemSecondRowSpecialSelect,
#updateProfile div.floatFieldItemSecondRowSpecialSelect,
#register div.floatFieldItemSecondRowTextarea,
#updateProfile div.floatFieldItemSecondRowTextarea {min-height: 9.5em;}

#updateProfile div.floatFieldItemSpecial {
    margin: 6px 0 0 0;
    padding-right: 0;
    float: left;
    clear: left;
    width: 100%;
    text-align: justify;
    /*border: 1px solid red;*/
    }
    
#register div.floatFieldItem input,
#register div.floatFieldItem select,
#updateProfile div.floatFieldItem input,
#updateProfile div.floatFieldItem select,
#register div.floatFieldItemSecondRow select,
#updateProfile div.floatFieldItemSecondRow select,
#register div.floatFieldItemSecondRowSpecialSelect select,
#updateProfile div.floatFieldItemSecondRowSpecialSelect select,
#userLogin div.floatFieldItem input,
#password div.floatFieldItem input,
#changePassword div.floatFieldItem input {margin-bottom: 0; width: 96%;}
/*Used a percentage width here because they are wrapped by a div, so can stretch and Safari was
displaying shorter widths*/

#register div.floatFieldItem select,
#updateProfile div.floatFieldItem select,
#register div.floatFieldItemSecondRow select,
#updateProfile div.floatFieldItemSecondRow select,
#register div.floatFieldItemSecondRowSpecialSelect select,
#updateProfile div.floatFieldItemSecondRowSpecialSelect select {padding: 0; width: 99%;}

/*Set to width: auto; for Firefox and Safari to fix a bug, on the IE stylesheet these
style changes have reverted back to the width: 99%;*/
#register div.floatFieldItemSecondRowSpecialSelect select,
#updateProfile div.floatFieldItemSecondRowSpecialSelect select {width: auto;}

#register div.floatFieldItem label,
#updateProfile div.floatFieldItem label,
#password div.floatFieldItem label,
#userLogin div.floatFieldItem label,
#register div.floatFieldItemSecondRow label,
#updateProfile div.floatFieldItemSecondRow label,
#register div.floatFieldItemSecondRowSpecialSelect label,
#updateProfile div.floatFieldItemSecondRowSpecialSelect label,
#register div.floatFieldItemSecondRowTextarea label,
#updateProfile div.floatFieldItemSecondRowTextarea label,
#changePassword div.floatFieldItem label {line-height: normal;}

/*-------------------------------------------*/
    
#register textarea,
#updateProfile textarea {margin-bottom: 0; min-height: 6em;}

#register div.floatFieldItemSecondRowTextarea textarea {width: 14em;}
    
/*Client radio group area, PBS Buyer check box, Media Interests, Genre Interests, Opt-In Opt-Out*/

#register #radioGroupArea,
#updateProfile #radioGroupArea {
    padding: 6px;
    padding-bottom: 0;
    border: 1px solid #EEE;
    background-image: url(../images/BackgroundTile_ContentLighter.png);
    background-repeat: repeat;
    }

#register #radioGroupArea input,
#updateProfile #radioGroupArea input,
#userLogin div.singleCheckboxLabel input,
#register div.singleCheckboxLabel input,
#updateProfile div.singleCheckboxLabel input,
#register div.floatFieldItem fieldset input,
#updateProfile div.floatFieldItem fieldset input,
#register div.floatFieldItemSpecial fieldset input,
#updateProfile div.floatFieldItemSpecial fieldset input {
    margin-bottom: 6px;
    float: left;
    clear: left;
    width: auto;
    }

#register #radioGroupArea label,
#updateProfile #radioGroupArea label,
#register div.singleCheckboxLabel label,
#updateProfile div.singleCheckboxLabel label,
#userLogin div.singleCheckboxLabel label,
#register div.floatFieldItem fieldset label,
#updateProfile div.floatFieldItem fieldset label,
#register div.floatFieldItemSpecial fieldset p,
#updateProfile div.floatFieldItemSpecial fieldset p {
    margin-left: 3px;
    float: left;
    line-height: 1.2em;
    width: 15em;
    }
    
#register div.floatFieldItemSpecial fieldset p {margin-bottom: 6px; line-height: 1.4em;} 
    
#updateProfile div.floatFieldItemSpecial fieldset p {width: 95%;}

#register div.singleCheckboxLabel,
#updateProfile div.singleCheckboxLabel {margin: 3px 0;}

/*Terms and Conditions, Privacy Policy - note on registration authority*/

#register #registrationStatement,
#updateProfile #registrationStatement {
    margin: 0 auto;
    margin-top: 6px;
    padding-top: 6px;
    float: left;
    clear: left;
    width: 100%;
    }
    
#register #registrationStatement p,
#updateProfile #registrationStatement p {margin-bottom: 6px; text-align: justify;}
    
#register a:link,
#register a:visited,
#register a:hover,
#register a:active, 
#updateProfile a:link,
#updateProfile a:visited,
#updateProfile a:hover,
#updateProfile a:active,
#success a:link,
#success a:visited,
#success a:hover,
#success a:active,
#password a:link,
#password a:visited,
#password a:hover,
#password a:active,
#pageNotFound a:link,
#pageNotFound a:visited,
#pageNotFound a:hover,
#pageNotFound a:active,
#pageError a:link,
#pageError a:visited,
#pageError a:hover,
#pageError a:active {
    color: #333;
    border-bottom: 1px dotted #333;
    line-height: 1.6em;
    }
    
#register a:hover,
#updateProfile a:hover,
#password a:hover,
#pageNotFound a:hover,
#pageError a:hover,
#success a:hover {color: #BD282E; border-bottom-color: #BD282E;}

#register div.floatFieldItemSpecial fieldset a:link,
#register div.floatFieldItemSpecial fieldset a:visited,
#register div.floatFieldItemSpecial fieldset a:hover,
#register div.floatFieldItemSpecial fieldset a:active {line-height: 1.4em;}

/*Input button area on the registration screen*/
        
#register div.inputSubmit,
#updateProfile div.inputSubmit,
#password div.inputSubmit,
#success div.inputSubmit,
#changePassword div.inputSubmit {
    margin-top: 6px;
    float: left;
    clear: left;/*Used here because there seemed to be a funny bug in FF, browser wouldn't clear: both, I think because of repitition of div.floatFieldItem.*/
    width: 100%;/*Once the above had been sorted, IE was then not behaving, so had to add a width*/
    border-top: solid 1px #999;
    }
    
#register div.inputSubmit input,
#updateProfile div.inputSubmit input,
#userLogin div.inputSubmit input,
#password div.inputSubmit input,
#success div.inputSubmit input,
#changePassword div.inputSubmit input {
    margin-bottom: 0;
    margin-top: 10px;
    width: 7em;
    }
    
#userLogin div.inputSubmit input {margin-top: 0;}

#password div.inputSubmit input.floatRightGetPassword {float: right; width: 8em;}

#success div.inputSubmit input.floatRightReturnLogin {float: right; width: 10em;}

/*The following div, p, ul and li styles are for the bottom error message area on the
registration/ update screens*/

#register div.errorNotification,
#updateProfile div.errorNotification {
    margin-top: 11px;
    float: left;
    clear: left; /*Used here because there seemed to be a funny bug in FF, browser wouldn't clear: both, I think because of repitition of div.floatFieldItem.*/
    width: 100%; /*Once the above had been sorted, IE was then not behaving, so had to add a width*/
    border-top: 1px dotted #666;
    }
    
#register div.errorNotification p,
#updateProfile div.errorNotification p {margin-top: 6px;}

#register div.errorNotification ul,
#updateProfile div.errorNotification ul {
    margin-top: 6px;
    padding: 6px;
    background-image: url(../images/BackgroundTile_Content.gif);
	background-repeat: repeat-y;
	background-position: top center;
	background-attachment: fixed;
    }
    
#register div.errorNotification li,
#updateProfile div.errorNotification li  {
    margin: 0 6px;
    padding: 3px 0 3px 17px;
    color: #BD282E;
    background-image: url(../images/Menu_Arrow_Error.gif);
    background-position: center left;
    background-repeat: no-repeat;
    } 
    
#register fieldset.optinout label,
#updateProfile fieldset.optinout label {margin-bottom: 10px;}
       
/*-----------=login links and submit-----------*/

#newAccountAndReminder {
    margin: 0;
    padding-top: 11px;
    clear: both;
    width: 19em;
    }

#newAccountAndReminder a {display: block; width: 17.7em;}
    
#newAccountAndReminder a:link,
#newAccountAndReminder a:visited,
#newAccountAndReminder a:hover,
#newAccountAndReminder a:active {
    margin: 6px 0;
    padding: 3px 6px;
    color: #BD282E;
    border: solid 1px #EEE;
    background-color: #FFF;
    }
    
#newAccountAndReminder a:hover {
    color: #333;
    border: solid 1px #CCC;
    }

#leftLoginDetail {
    padding: 11px 16px;
    float: left;
    width: 19em;
    border: 1px solid #EEE;
    }

#rightLoginDetail {
    float: right;
    width: 38.5em;
    }
    
#rightLoginDetail h2 {
    margin: 6px 0 0 0;
    padding: 2px;
    display: block;
    border: 1px solid #EEE;
    }
    
#rightLoginDetail p,
#rightLoginDetail div.specialFloat {line-height: 1.8em; /*text-align: justify;*/}

#rightLoginDetail div.specialFloat p {
    margin: 0 6px 0 0;
    padding: 2px;
    display: inline;
    float: left;
    width: 46%;
    /*border: 1px solid orange;*/
    }
    
#rightLoginDetail div.specialFloat a {display: inline;}

#rightLoginDetail div.specialFloat a:link,
#rightLoginDetail div.specialFloat a:visited,
#rightLoginDetail div.specialFloat a:hover,
#rightLoginDetail div.specialFloat a:active {
    margin: 0;
    padding: 0;
    color: #333;
    border: none;
    background-image: none;
    border-bottom: dotted 1px #333;
    }
    
#rightLoginDetail div.specialFloat a:hover {
    color: #BD282E;
    border-color: #BD282E;
    }

#userLogin div.inputSubmit {
    float: left;
    clear: left;
    }

#userLogin div.inputSubmit input {margin-bottom: 0;}

/*------- =accountDetails (login screen register new staff user & password reminder --------*/

#accountDetails {
    margin: 6px auto 0 auto;
    padding: 11px 22px; 
    border: solid 1px #B5B5B5;
    text-align: center;
    }
    
#accountDetails a:hover {
    background-image: url(../images/BackgroundTile_Content.gif);
	background-repeat: repeat-y;
	background-position: top center;
	background-attachment: fixed;
    }
     
/* ----------------------------------------------------*/

/*------ Terms and Conditions -------*/ 

#register #registrationBlurb {
   margin: 16px 0 8px 0;
   clear: left;
   float: left;
   width: 100%;
   line-height: 1.4em;
   }