/* --------------------------------------------------------------

   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .title or .text
   * For inline forms, use .inline (even when using columns)

-------------------------------------------------------------- */

/* 
	A special hack is included for IE8 since it does not apply padding 
	correctly on fieldsets
 */ 
label, .fake-form dt {  }
fieldset    { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }

fieldset, #IE8#HACK { padding-top:1.4em; } 
legend, #IE8#HACK { margin-top:0; margin-bottom:0; }

/* Form fields
-------------------------------------------------------------- */

/* 
  Attribute selectors are used to differentiate the different types 
  of input elements, but to support old browsers, you will have to 
  add classes for each one. ".title" simply creates a large text  
  field, this is purely for looks.
 */
input, textarea, .fake-form dd {
  font-family: Verdana, sans-serif;	
  font-size: 1em;	
  background-color:#fff;
  border:1px solid #bbb;
}

input[type="checkbox"], input[type="radio"]{
    background: transparent;
    border: 0;
}

input:focus, input.title:focus, textarea:focus {
  border-color:#666;
}
select { background-color:#fff; border-width:1px; border-style:solid; }

input, input.title, textarea, select {
  margin: 0;
}

textarea      { width: 390px; height: 250px; padding:5px; }

/* 
  This is to be used on forms where a variety of elements are 
  placed side-by-side. Use the p tag to denote a line. 
 */
form.inline { line-height:3; }
form.inline p { margin-bottom:0; }


/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */

.error,
.alert, 
.notice,
.success, 
.info 			{ padding: 0.8em; margin-bottom: 1em; border: 1px solid #ddd; }

.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice     { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success    { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info 			{ background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, .alert a { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }
.info a			{ color: #205791; }


/* STYLE */


label, .fake-form dt {
	margin: 1em 0 0.3em 0;
	display: block;
}

#currentCatalogues label {
    display: inline;
}

#content label.h2 {
	background: none;
	padding-bottom: 0;
	float: none;
	margin-top: 0.3em;
}

html .fake-form dt {
	color: #7d7d7d;
}

.row {
	float: left;
	clear: left;
	margin: 0 0 1.5em 0;
}
.row+.row {
	margin-top: -0.5em;
}

.row.row-seperate {
	width: 100%;
	padding-top: 1em;
	margin-top: 0.5em;	
	background: transparent url('../../img/generic/dotted-line-border.gif') 0 0 repeat-x;	
}

.row-submit.row-seperate {
	padding-top: 1.5em;
}

.row-text label, 
.row-date label, 
.row-number label, 
.row-select label, 
.fake-form dt {
	float: left;
	margin-right: 1em;
}

input, textarea, .fake-form dd {
	padding: 0.727272727272727em 0.8em; /* 8px */
}

.row-select select {
	margin: 0.727272727272727em 0; /* 8px */	
}

.row-checkbox input,
.row-radio input {
	margin-left: -25px;
	margin-top: 0.2em;
	float: left;
}

.row-checkbox label,
.row-radio label {
	padding-left: 25px;
}

.fake-form dt {
	clear: left;
}
.fake-form dd {
	float: left;
	margin-bottom: 1em;
}

.row-submit input {
	font-family: georgia, serif;
	font-size: 118.1818181818182%; /* 13px */
	background: #9e9f9d;
	color: #fff;
	border: none;
	margin: 0;
	padding: 0.461538461538462em 0.5em 0.538461538461539em 0.5em; /* 6px 7px */
	cursor: pointer;
	cursor: hand;	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;	
	border-radius: 4px;	
	position: relative;
}
.ie6 .row-submit input,
.ie7 .row-submit input,
.ie8 .row-submit input {
	/*	behavior: url('/content/js/PIE.htc');	*/
}
	
.row-heading {
	margin-bottom: 1em;
}
.row+.row-heading {
	margin-top: 1em;
}

.fiction .row-submit input, html .row-submit.fiction input { background: #ff5a00; }
.author .row-submit input, html .row-submit.author input { background: #00b6f3; }
.non-fiction .row-submit input, html .row-submit.non-fiction input { background: #fb0800; }
.children .row-submit input, html .row-submit.children input { background: #b61f81; }
.ebooks .row-submit input, html .row-submit.ebooks input { background: #00c7c7; }
.audiobooks .row-submit input, html .row-submit.ebooks input { background: #008caa; }
.about .row-submit input, html .row-submit.about input { background: #003d80; }
.news .row-submit input, html .row-submit.news input { background: #00c8e8; }
.author .row-submit input, html .row-submit.author input { background: #00b6f3; }
.about .row-submit input, html .row-submit.about input { background: #003d80; }
.competitions .row-submit input, html .row-submit.competitions input { background: #b7006e; }
.account .row-submit input, html .row-submit.account input { background: #b7006e; }
.alt-1 .row-submit input, html .row-submit.alt-1 input { background: #9473ca; }

.row-info {
	margin-bottom: 0;
}


.form-layout-1 .row {
	padding-left: 10em;
}
.form-layout-1 .row label {
	margin-left: -10em;
	width: 9em;
}
.form-layout-1 .row-radio p {
	margin: 1em 0 0.3em 0;	
	margin-left: -10em;
	float: left;
	width: 9em;	
}
.form-layout-1 .row-radio label {
	margin-left: 0;
	width: auto;
}


/* Input borders */

.text-input {
	position: relative;
	display: inline-block;
}

.text-input input {
	margin: 0;
	position: relative;
	z-index: 1;
	background: none;
	border: none;	
}

.ie6 .text-input input,
.ie6 .text-input input,
.ie6 .text-input input,
.ie6 .text-input input {
	border: 1px solid #bbb;
	background: #fff;
}


.text-input .bg-1,
.text-input .bg-2,
.text-input .bg-3,
.text-input .bg-4 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: transparent url('../../img/frame/share-input-background.gif') 0 0 no-repeat;	
}

.ie6 .text-input .bg-1,
.ie6 .text-input .bg-2,
.ie6 .text-input .bg-3,
.ie6 .text-input .bg-4 {
	display: none;
}

.text-input .bg-1 {
	background-position: 0 0;
}

.text-input .bg-2 {
	background-position: 100% 0;
	width: 50%;
	right: 0;
	left: auto;
}

.text-input .bg-3 {
	background-position: 100% 100%;
	height: 50%;
	right: 0;
	left: auto;
	bottom: 0;
	top: auto;
}

.text-input .bg-4 {
	background-position: 0 100%;
	width: 50%;
	height: 50%;
	bottom: 0;
	top: auto;
}

/** Autocomplete text field */
.ui-autocomplete {
	max-height: 350px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
	/* add padding to account for vertical scrollbar */
	/*padding-right: 20px; LG*/
	background-image: none;
	background-color: #FFF;
	z-index: 20000 !important;
}

.ui-autocomplete-input.ui-autocomplete-loading {
	background: white url('../../img/generic/ui-anim_basic_16x16.gif') 298px 9px no-repeat; 
}

/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
	height: 350px;
	background-image: none;
	background-color: #FFF;
}


.ui-autocomplete.ui-menu li {
	min-height: 27px;
	background: none;
	background-color: #FFF;
	padding-top: 1px;
	padding-right:20px;
	font-family:Georgia;
	border-top:1px solid #EBEBEB;
	margin-bottom:1px;
}

.ui-autocomplete.ui-menu li br.clearfloat{
	float: none;
}

.autocomplete-search-item .clear{
	float: none;
	clear: both;
}

.autocomplete-search-item a img{
	min-width: 40px;
	max-width: 40px;
	border: 1px solid #CCC;
	float: left;
	margin: 2px;
}

.autocomplete-search-item a .detail{
	margin-left: 50px;
	max-width: 225px;
}

.autocomplete-search-item a .detail h3{
	background: none;
	margin: 0;
	padding: 0;
}

.autocomplete-search-item a .detail em{
	color: #FF5A00;
	font-style: normal;
	font-weight: bold;
}

.autocomplete-search-item a .detail p{
	
}

/* Random TV form
-------------------------------------------------------------- */

.random-tv-search-wrapper
{    
    position:relative;
    padding: 10px 10px 19px;
    border:1px solid #EBEBEB;
    margin-bottom:20px;
    
}

.random-tv-search-wrapper img.orange-arrow
{
    float:left;
    margin: 11px 11px 0 0;       
}


.random-tv-search-wrapper img.search-icon
{
    float:left;
    margin-right:15px;    
    margin-top: 25px;
}

.random-tv-search-wrapper div.col
{
    float:left;
    margin-right:15px;
    width:230px;    
}

.random-tv-search-wrapper div.col.rightcol {
    width: 212px;
}

.random-tv-search-wrapper label
{
    margin:0 0 10px 0;           
}

.random-tv-search-wrapper label h2
{
    font-size:15px;
    background-image:none;
    padding:0;    
}

.random-tv-search-wrapper input, .random-tv-search-wrapper select
{
    width:190px;
    float:right;
}


.random-tv-search-wrapper .row-submit
{
    float: right;
    margin-top: 27px;
    position: relative;
}

.random-tv-search-wrapper .row-submit input
{
    width:78px;
    padding-left:10px;
    padding-right:22px;
    background-image: url("../../img/generic/button-arrow.png");
    background-position:60px 10px;
    background-repeat:no-repeat;
    margin-right: 16px;
}

.random-tv-search-wrapper select
{
    height:31px;
    padding: 5px 0;    
    
}

.ie7 .random-tv-search-wrapper select
{
    margin-top:0;
}

.ie7 .random-tv-search-wrapper input
{    
    padding: 2px 0 0 2px;
    height:18px;
}

.ie7 .random-tv-search-wrapper label
{
    margin:0 0 18px 0;           
}

.ie7 .random-tv-search-wrapper img.orange-arrow {    
    margin: 3px 11px 0 0;
}

.ie7 .random-tv-search-wrapper .row-submit
{
    margin: 32px 15px 0 0;        
}

.ie7 .random-tv-search-wrapper .row-submit input
{
    background-position: 73px 11px;  
    height:28px;  
    width:90px;
}

/* Date pickers 
-------------------------------------- */
#ui-datepicker-div 
{
	z-index: 2 !important;
}

/* select (dropdown)
/*This will work for firefox*/
@-moz-document url-prefix() 
{
    .register-form select
    {
		height:auto!important;
		margin-top:7px;
	}
}