/*
    These styles control the appearance of the dropdownlists.

    Sample code not used can be found at the end of this document.
*/

select:focus {
	background-color: #F4F4F4; /* Pre May 2016 #E5E6E7; *//* Not sure that this works in IE10 but may work in other browsers */
}

option {
	background-color: #F4F4F4; /* Pre May 2016 #E5E6E7; */
}

/* Common DropDownList -------------------------------------------------- */

select.td_dropdownlist_crud_insert_mandatory_150,
select.td_dropdownlist_crud_insert_mandatory,
select.td_dropdownlist_crud_insert_optional,
select.td_dropdownlist_disabled,
select.td_dropdownlist_gridview_filter,
select.td_dropdownlist_mandatory,
select.td_dropdownlist_news_archive,
select.td_dropdownlist_optional {
	background-color: #F4F4F4; /* Pre May 2016 #E5E6E7; */
	border: 1px solid #CFCFCF; /* Pre May 2016 0px solid transparent; */
	/* Pre May 2016 border: 0px solid transparent; */
	border-radius: 2px;
	color: #595959; /* Pre May 2016 #929497; */
	font-family: "PT Sans", Arial, Helvetica, sans-serif, Verdana;
    font-size: 12px; /* Pre May 2016 13px; */
	height: 40px; /* Not sure why height 30px doesn't equate to the height of textboxes. */
	line-height: 32px; /* Pre May 2016 32px; */
	min-height: 40px;
	padding: 10px 10px 10px 10px; /* top right bottom left */
	text-align: left;
    /* Don't implement this here. Instead use a '...wide' skin. */
    /* Even though the DropDownList will be narrow, the elements within it will display properly. */
    /*max-width: 300px;*/
	/* -webkit-appearance: none; *//* Stops the default dropdownlist arrow from appearing - all webkit and mozilla browsers */
}

/* Data Entry CRUD (Insert appears in the GridView Footer) -------------------------------------------------- */
select.td_dropdownlist_crud_insert_mandatory_150,
select.td_dropdownlist_crud_insert_mandatory,
select.td_dropdownlist_crud_insert_optional {
	height: 25px;
	min-height: 25px;
	padding: 0px 0px 0px 3px; /* top right bottom left */
}

/* Disabled (data entry) DropDownList -------------------------------------------------- */

select.td_dropdownlist_disabled {
    background-color: transparent;
}

/* Gridview Filter DropDownList -------------------------------------------------- */

select.td_dropdownlist_gridview_filter {
    font-size: 10px; /* Pre May 2016 13px; */
	height: 16px;
	min-height: 0px;
	padding: 0px 0px 0px 0px; /* top right bottom left */
}

/* DropDownList News Archive -------------------------------------------------- */
select.td_dropdownlist_news_archive {
	font-size: 14px;
}

/* Mandatory (data entry) DropDownList -------------------------------------------------- */

select.td_dropdownlist_crud_insert_mandatory_150,
select.td_dropdownlist_crud_insert_mandatory,
select.td_dropdownlist_mandatory {
    /* border-right: 3px solid #007DBA; *//* Pre May 2016 #5EA2D6; */
	background-color: #F4F4F4;
}
 
/* Optional (data entry) DropDownList -------------------------------------------------- */

select.td_dropdownlist_optional {
}
select.td_dropdownlist_crud_insert_optional {
	background-color: white;
}

/* DropDownList on MasterPage showing possible trading books -------------------------------------------------- */

/* The styles here are associated with div tags which are, in combination with a repeater control, used to mimic the behaviour of a DropDownList.
	Why do this?
	Because the standard select tag, which is an operating system object rather than a browser object, is complicated to format.
	*/

.td_div_dropdownlist_user_trading_book { /* div */
	background: url('/images/td_icon_dropdown_arrow.png');
	background-position: right;
	background-repeat: no-repeat;
    display: inline-block;
	padding: 10px 0px 10px 0px; /* top right bottom left */
    position: relative;
	min-width: 150px;
}
.td_div_dropdownlist_user_trading_book_item { /* div */
	/* The only entries within this div is buttons which will have their own background and color settings */												
	background-color: white;
	border: 0px none transparent;
	display: none;
	left: -120px; /* mimicing right alignment relative to the parent div */
	max-height: 500px;
	min-width: 300px;
	position: absolute;
	/*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
	/*padding: 12px 16px;*/
	overflow: hidden;
	overflow-y: scroll;
	top: 35px; /* so that the div sits just underneath the parent div */
	z-index: 10;
}
.td_div_dropdownlist_user_trading_book:hover .td_div_dropdownlist_user_trading_book_item {
	display: block; /* which means the inner div appears */
}
.td_span_dropdownlist_user_trading_book_header { /* span */
	font-size: 12px;
	margin-left: 10px;
	/* max-width: 150px; Consider this in relation to the buttons within each item of the repeater control */
	/*min-width: 300px;*/
}
.td_span_dropdownlist_user_trading_book_header:hover {
	cursor: pointer;
}
/* Note there is also td_label_dropdownlist_user_trading_book_header in tb_viewing_label.css */

/* end --------------------------------------------------  */