/* Used on collection and media item show pages */
img.icon {
	max-width: 400px;
	vertical-align: top;
    float: right;
    margin-bottom: 20px;
}

/* Used on collection and media item edit pages */
img.icon_edit {
	max-width: 400px;
	vertical-align: top;
    margin-bottom: 20px;
}

/* Used on select stock image page */
img.icon_select {
	max-width: 200px;
	vertical-align: top;
    margin-bottom: 20px;
}


/* Used in lists of collections and media items (fixed width) */
img.icon_small {
	width: 96px;
	vertical-align:top;
}

/* Used to the right of the breadcrumbs on additional tabs of       */
/* collection and media item pages (fixed height to fit in header)  */
img.icon_tiny {
	height: 64px;
	vertical-align: top;
    margin-top: 2px;
}

/* To display any text below image on collection and media item show pages */
p.icon {
    max-width: 400px;
    vertical-align: top;
    float: right;
    font-size: 0.9em;
    text-align: right;
    margin-bottom: 20px;
}

/* Used as a span class to unbold the data type in a page's h1 heading */
.dataType {
	font-weight:normal;
}

/* used to style functions eg 'add collection' */
.function {
	text-align:right;
}

/* *************************************************************** */
/* Autocomplete fields                                             */
/* *************************************************************** */

div.autocomplete {
    position: absolute;
    background-color: #E0F0FF;
    border: 1px solid #8080FF;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

div.autocomplete ul {
    list-style-type: none;
    margin:0px;
    padding:0px;
}

div.autocomplete ul li {
    width: 1000px;
    list-style-type: none;
    display: block;
    margin: 0px;
    cursor: pointer;
}

div.autocomplete ul li.selected {
    color: #FFFFFF;
    background-color: #6060B0;
}


/* *************************************************************** */
/* Tabs                                                            */
/* *************************************************************** */

.tabs {
    margin-bottom: 1em;
	clear:both;
}

ul.tablist {
    display: inline;
    list-style: none;
    margin-left: 0;
    padding: 0;
}

.tab a:hover {
	text-decoration: none
}

.tab {
    background: #e4e4e4;
	color: #000000;
    background-image : url("../images/cam/tab-grey-left.gif");
    background-repeat : no-repeat;
    text-align:center;
    padding-left: 10px;
	padding-top: 0px;
    float:left;
    border-bottom:none;
}

.tab span {
    background: url("../images/cam/tab-grey-right.gif") right top no-repeat;
    padding-right: 10px;
}

.tabselected {
    background: #0099cc;
    background-image : url("../images/cam/tab-cblue-left.gif");
    background-repeat : no-repeat;
    text-align:center;
    padding-left: 10px;
	padding-top: 0px;
    float:left;
    border-bottom:none;
	font-weight: bold; color: #FFFFFF;
}

.tabselected span {
    background: url("../images/cam/tab-cblue-right.gif") right top no-repeat;
    padding-right: 10px;
}

.blank {
    width:3px;
    background-repeat : no-repeat;
    float:left;
    border-bottom:none;
    font-size:.8em;
    font-family : verdana,arial,sans-serif ;
}


/* *************************************************************** */
/* Edit/Update Forms                                               */
/* *************************************************************** */

.fieldopts {
	vertical-align:top;
	width:2em;
}
.required {
	font-weight:bold;
	color:Red;
	font-size:1.0em;
}
.retranscode {
	font-size:0.5em;
	color:Red;
}

/* retranscode warning div. Shown on change */
div#retranscode {
	display:none;
}

.prop td {
	padding-bottom:1.5em;
	padding-right:1em;
}

form .name {
	text-align:right;
	vertical-align:top;
	font-weight:bold;
}

form .value {
	vertical-align:top;
}

form #title { width:100%; }
form #keywords { width:100%; }
form #publisher { width:100%; }
form #copyright { width:100%; }
form #name { width:100%; }

form .form_help {
	vertical-align:middle;
	font-size:small;
	font-style:italic;	
	color: #003399;
}

.page_help {
    display: table;
    background: #ffffd9 url("../images/info.gif") 0.5em 0.5em no-repeat;
    padding: 0.5em 2.5em 0.5em 2.5em;
    margin: 1em 2em 1em 2em;
    border: 1px solid #b3b3b3;
    color: #353535;
}

.page_help h3 {
	margin-top: 0px;
    margin-bottom: 6px;
    font-style: normal;
}

.page_help .vspace {
    height: 5px;
}

.page_help form {
    display: inline;
}

textarea {
	width:100%;
	min-height:10em;
	overflow-y:scroll;
	font-family:inherit;
	font-size:inherit;
}

/*
textarea#description {
	width:100%;
	min-height:5em;
	overflow-y:scroll;
	font-family:inherit;
	font-size:inherit;
}
*/


.multivaluerow {
	padding-bottom:0.5em;
	vertical-align:top;
}

/* *************************************************************** */
/* Metadata page layout.                                           */
/* *************************************************************** */

/* for headings with icon to the right */
.icon_heading img.icon {
	float:right;
}
.icon_heading img.icon_small {
	float:right;
}
.icon_heading img.icon_tiny {
	float:right;
}



.metadata div {
	float:left;
	width:100%;
}

.metadata div.left {
	float:left;
	width: 50%;
	min-width: 200px;
}
.metadata div.right {
	float:right;
	width: 50%;
	min-width: 200px;
}

/* buttons appear after metadata. Such as Edit, Delete. */
div.buttons {
	clear:both;
}

/* 
 * Clearly mark destructive buttons such as on Withdraw form.    
 * Not nice to look at - intended for admins
 */
input.destroy {
	background-color:#FF5555;
	font-weight:bold;
}

/* hack for forms with multiple submit buttons - put a button with this
   class first in the form and it will be the default button when
   enter is pressed in a text field */
input.hidden {
    width: 0px;
    height: 0px;
    border-width: 0px;
    background: none;
}

/* prop contains a name+value pair */
.metadata div.prop {
}

.metadata .name {
	font-weight:normal;
	
}
.metadata .value {
	font-weight:bold;
}

.metadata dl {
}

.metadata dt {
	font-weight:bold;
	font-size: 1em;
	max-width:7em; /* make same as: dd margin-left */
	line-height:1.1em;
}

.metadata dd {
	font-size: 1em;
	vertical-align:top;	
	position: relative; top: -1.1em;
	margin-left:7em; /* make same as: dt max-width */
}

.metadata .longtext {
	border: solid thin;
	border-color:#CCCCCC;
	overflow-y:scroll;
	min-height:5em;
	margin-bottom:1em;
	
	position: relative; top: 0.0em;
	margin-left:0em;
}

.image_edit_inherited {
	border: 1px solid #C0C0C0;
}
.image_edit_inherited {
	text-align:center;
}


.select_images td  {
	border: 1px solid #C0C0C0;
	text-align:center;
	padding: 10px;
}
.select_image_icon_small {
	max-width:  96px;
	max-height: 96px;
	vertical-align:top;
}


ul#upload_what_next {
	list-style-image:url("../images/cam/redarrow2.gif");
}


/* *************************************************************** */
/* Grails (from main.css)                                          */
/* *************************************************************** */

/* NAVIGATION MENU */

.nav {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    border-style: solid none solid none;	
    margin-top: 5px;
    padding: 7px 12px;
}

.menuButton {
    font-size: 10px;
    padding: 0 5px;
}
.menuButton a {
    color: #333;
    padding: 4px 6px;
}
.menuButton a.home {
    background: url(../images/skin/house.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}
.menuButton a.list {
    background: url(../images/skin/database_table.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}
.menuButton a.create {
    background: url(../images/skin/database_add.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

/* MESSAGES AND ERRORS */


.message {
    background: #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
    border: 1px solid #b2d1ff;
    color: #006dba;
    margin: 10px 0 5px 0;
    padding: 5px 5px 5px 30px
}
.successMessage {
    background: #f0fff0 url(../images/skin/information-green.png) 8px 50% no-repeat;
    border: 1px solid #006d00;
    color: #006d00;
    margin: 10px 0 5px 0;
    padding: 5px 5px 5px 30px
}
.errorMessage {
	background: #fff3f3 url(../images/skin/exclamation.png) 8px 50% no-repeat;
    border: 1px solid red;
    color: #cc0000;
    margin: 10px 0 5px 0;
	padding: 5px 5px 5px 30px
}


div.errors {
    background: #fff3f3;
    border: 1px solid red;
    color: #cc0000;
    margin: 10px 0 5px 0;
    padding: 5px 0 5px 0;
}
div.errors ul {
    list-style: none;
    padding: 0;	
}
div.errors li {
	background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
    line-height: 16px;
    padding-left: 30px;
}

td.errors select {
    border: 1px solid red;
}
td.errors input {
    border: 1px solid red;
}

/* TABLES */

.list table {
    border: 1px solid #ccc;
    width: 100%
}
.list tr {
    border: 0;
}
.list td, .list th { 
    font: 11px verdana, arial, helvetica, sans-serif;
    line-height: 12px;
    padding: 5px 6px;
    text-align: left;
    vertical-align: top;
}
.list th {
    background: #fff url(../images/skin/shadow.jpg);
    color: #666;
    font-size: 11px;
    font-weight: bold;
    line-height: 17px;
    padding: 2px 6px;
}
.list th a:link, .list th a:visited, .list th a:hover {
    color: #333;
    display: block;
    font-size: 10px;
    text-decoration: none;
    width: 100%;
}
.list th.asc a, .list th.desc a {
    background-position: right;
    background-repeat: no-repeat;
}
.list th.asc a {
    background-image: url(../images/skin/sorted_asc.gif);
}
.list th.desc a {
    background-image: url(../images/skin/sorted_desc.gif);
}

.list .odd {
    background: #f7f7f7;
}
.list .even {
    background: #fff;
}


/* make text links in tables link on clicking anywhere in their td (not grails default) */
.list td a:link, .list td a:visited, .list td a:hover {
    color: #333; /* Fixes link colour even if visited */
    display: block;
    font-size: 10px;
    text-decoration: none;
    width: 100%;
}


/* LIST */

.list table {
    border-collapse: collapse;
}
.list th, .list td {
    border-left: 1px solid #ddd;
}
.list th:hover, .list tr:hover {
    background: #b2d1ff;
}

/* PAGINATION */

.paginateButtons {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    border-top: 0;
    color: #666;
    font-size: 10px;
    overflow: hidden;
    padding: 10px 3px;
}
.paginateButtons a {
    background: #fff;
    border: 1px solid #ccc;
    border-color: #ccc #aaa #aaa #ccc;
    color: #666;
    margin: 0 3px;
    padding: 2px 6px;
}
.paginateButtons span {
    padding: 2px 3px;
}

/* *************************************************************** */
/* Search forms                                                    */
/* *************************************************************** */

input, select, textarea {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 90%;
}

.main-search-container {
    margin: 1em 0px 1em 25px;
    width: 10%;
}

.main-search-container .main-search-form {
    border: 2px solid #E0E0F0;
    padding: 12px;
}

.main-search-container .main-search-form form {
    display: inline;
}

.main-search-container .common-links {
    padding-top: 12px;
}

.main-search-label {
    color: #800000;
    font-size: 2em;
    font-weight: bold;
    padding-right: 20px;
}

.search-type {
    font-size: 90%;
}

.search-summary {
    border-top: 1px solid #0088BB;
    margin: 10px 0px 2px 0px;
}

.search-summary p {
    margin-top: 0px;
    float: right;
}


/*  
 * These forms need to appear inline so further forms and their buttons appear as part of the main form.
 */ 
 
/* Edit Media forms */
form#edit_media     { display: inline; }
form#delete_media   { display: inline; }
form#withdraw_form  { display:inline; }



/* *************************************************************** */
/* Listing tables                                                  */
/* *************************************************************** */

.paginate a[href]:active {
    color: #039;
}

.paginate a:visited {
    color: #039;
}

.listing {
    margin-bottom: 1em;
    width: 95%;
}

.listing td, .listing th {
    padding: 3px 10px;
}

.evenline {
    background: #FFFFFF;
    color: #000000;
    padding-left: 2px;
    padding-right: 2px;
    vertical-align: top;
}

.oddline {
    background: #e3e3e3;
    color: #000000;
    padding-left: 2px;
    padding-right: 2px;
    vertical-align: top;
}

.list_sep {
    margin-top: 10px;
    border-top: 1px solid #C0C0C0;
    height: 1px;
}

.supplemental_data {
    margin-top: 0.5em;
    font-size: 0.8em;
}

.rsupplemental_data {
    font-size: 0.8em;
    color: #666;
    float: right;
}

/* *************************************************************** */
/* Table for entity's attributes                                   */
/* *************************************************************** */

table.details {
    margin-left: 0em;
}

table.details th {
    text-align: right;
}

.media-sep-line {
    border-top: 1px solid #0088BB;
    margin: 0px 0px 0px 0px;
    font-size: 1px;
    clear: both;
}

.rss {
    margin-top: 2px;
    float: right;
}

.rss img {
    margin-bottom: -3px;
}

.no_player {
    border: 1px solid black;
    padding: 20px;
}

/* *************************************************************** */
/* Transcript (probably *very* long, when present)                 */
/* *************************************************************** */

div.transcript {
    margin: 8px;
    padding: 0px 5px 0px 5px;
    clear: right;
}

div.transcript_text {
    border: 2px solid #ccc;
    padding: 3px;
    height: 25em;
    overflow: scroll;
}

/* Footer login details */

.footer_right {
    text-align: right;
    float: right;
}