@import 'nav.css';
@import 'subnav.css';


/*General site wide styles used often*/
td{
    vertical-align:top;
}
.strong{
    font-weight:bold !important;
}
.grey{
    color:#5c5c5c !important;
    font-weight:normal;
}
.blue{
    color:#16305d !important;
}
.dark-grey{
    color:#353b2f !important;
}
.blue-border{
    border:1px solid #b9cddf;
}
.grey-border{
    border:1px solid #e1e1e1;
}
.space-right{
    margin-right:10px !important;
}
.space-top{
    margin-top:10px!important;
}
.space-bottom{
    margin-bottom:10px!important;
}
.space-left{
    margin-left:10px!important;
} 

.button{
    color:#fff;
    font: bold 11px Arial;
    background-color:#7c8d9e;
    border:1px solid #ccd6e1;    
}
.bar{
    margin: 0 10px 10px 10px;
    border-bottom:1px dashed #d4d4d4;
}





/*Styles used on every page*/

/*navigation styles*/
body{
    width: 968px;
    color: #353b2f;
    font: 11px Arial;
    behavior:url("../js/csshover.htc");
}
/*header styles*/
#header{
    text-align:right;
    color: #a35c22;
    font: 11px, Arial;
}

#header .textSize{
    color:#034965;
    font: bold 11px, Arial;
}
#header a:link{
    color: #5e5e5e;
    font: bold 11px, Arial;
    text-decoration: none;
}
#header a:visited{
    color: #5e5e5e;
    font: bold 11px, Arial;
    text-decoration: none;
}
#header a:hover{
    color: #9d5113;
    font: bold 11px, Arial;
    text-decoration: none;
}
#header a .selected{
    color: #9d5113;
    font: bold 11px, Arial;
    text-decoration: none;
}

#navigation{
    clear: both;
    background: url("../../images/structural/nav_background_red.gif") no-repeat;
    height: 42px;
}
/*Footer styles*/
#footer{
    padding-top: 5px;
    padding-left: 10px;
    font: 10px Arial;
    line-height: 14px;
    color: #676767;
}

#footer a{
    font: 10px Arial;
    color: #676767;
}


/*Home Page Styles*/
H2{
    font: bold 11px Arial;
    color: #034965;
    line-height:18px;
    padding: 0px;
    margin:0px;
}
form{
    padding:0px;
    margin:0px;
}

select{
    font: 11px Arial;
    color: #646464;
    border: 1px solid #7f9db9;
}

H2.grey{
    color: #646464;
}

a{
    line-height:18px;
    font: 11px Arial;
    color: #864c21;
}

/*content styles -  content is the center section of the home page below the navigation and above the footer*/
#homepage-content{
    clear: both;
    background: url("../../images/structural/body_background_slice_red.gif") repeat-y;
}
#homepage-content-bottom{
    clear: both;
    background: url("../../images/structural/page_bottom_red.gif") no-repeat;
    height: 18px;
}

/*this style was given to the 3 colum table on the home page*/
.content_cell{
    padding-left: 10px;
}


/*each section of the home page is given the content_section style. This gives the padding and general;text styles. */
.content_section{
    padding-bottom:10px;
    color: #353b2f;
    font: 11px Arial;
    line-height:18px;
    width:inherit;
}
.content_section.search{
    width:340px;
}
.content_section_text_cell{
    color: #353b2f;
    font: 11px Arial;
    line-height:18px;
    
}

.dropdown_body {
    margin: 0 10px;
}
/*if the conent section has a seperate header bar, this style is used*/
.content_header{
    width:inherit;
    height: 30px;
    margin-bottom: 4px;
}

.content_header span {
    display: none;
}


/*for the rounded cornet boxes on the home page, each box has 3 parts. The top and bottom hold a image 
    that makes the rounded corners*/
.top{
    width:inherit;
}

.center{
    width: inherit;
    background:url("../../images/structural/large_slice.gif") repeat-y;
}

.center table {
    margin: 0 10px;
    padding: 10px 0;
}


.center.right{
    background:url("../../images/structural/small_slice_background.gif") repeat-y;
    
}

.center.selection{
    background-image:none;
    background:url("../../images/structural/selection_slice_background.gif") repeat-y;
    padding-top: 10px; 
}

.bottom{
    width:inherit;
}

/*this icon and thumnail give the home page images style*/
.icon{
    margin-right:10px;
}

.thumbnail{
    border:1px solid #b9cddf;
    margin-right:10px;
}

/*most boxes on the home page have a table so that images and text can be lined up. this is the style for the table cell*/

.center_cell{
    color: #424242;
    font: 11px Arial;
    padding-bottom:10px;
    width:inherit;
}

.center_cell.center_right{
    width:235px;
}
.right_cell{
    color: #424242;
    font: 11px Arial;
    padding-bottom:10px;
    width:inherit;
}
.right_cell.right_right{
    

}
.center_cell.left_right{
    color: #424242;
    font: 11px Arial;
    padding-bottom:10px;
    width:293px;
}
.center a{
    color: #864c21;
}
.center .link_arrow{
    color: #864c21;
}
.event_text{
    color: #1d2c55;
}

/*these are the styles for the search section*/
#search_header{
    width:inherit;
    background: url("../../images/structural/hdr_search_tabs.gif") no-repeat;
    width: inherit;
    padding-top:6px;
    padding-bottom:4px;
}
#search{
    background:url("../../images/structural/search_slice.gif") repeat-y;
    /*border-left:1px solid #dcdcdc;
    border-right:1px solid #dcdcdc;
    background-color: #f5f5f5;*/
    width:inherit !important;
    max-width:340px !important;
    color: #864c21;
    font: 11px Arial;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
}
#search td{
    padding-right: 7px;
    padding-bottom: 5px;
}
#search td.last{
    padding-right: 0px;
}
#search label{
    color: #353b2f;
    font: 11px Arial;
}
#search a{
    color: #864c21;
    font: 11px Arial;
}
#search_header a{
    color: #3c1c10;
    font: 11px Arial;
    
}
.search_text_box{
    width: 118px;
    border: 1px solid #ccd6e1;
}





/*Secondary Page Styles*/

#secondary-header{
    width:946px;
    margin: 0px 0px 0px 0px;
    padding-top:5px;
    padding-bottom: 13px;
    background: url("../../images/structural/body_background_slice.gif") repeat-y;
}
#secondary-content{
    clear: both;
    background: url("../../images/structural/secondary_page_slice.gif") repeat-y;
    height:100%;
    width:968px;
    padding-bottom:1px;
}
#secondary-content-bottom{
    clear: both;
    background: url("../../images/structural/page_bottom.jpg") no-repeat;
    height: 18px;
}

/*Secondary Header text Styles*/
#secondary-content h2{
    color:#b85a0e;
    font: bold 14px Arial;
    line-height: 16px;
    padding:0px;
    margin:0px;
}
#secondary-content h3{
    text-transform: uppercase;
    color:#16305d;
    font: bold 11px Arial;
    line-height: 16px;
    padding:0px;
    margin:0px;
}
#secondary-content h4{
    color:#353b2f;
    font: bold 11px Arial;
    line-height: 16px;
    padding:0px;
    margin:0px;
}

/*Secondary Page - Left column styles*/
#left-column {
    float: left;
    width: 197px !important;
    height:100%;
    margin:0px !important;
    padding:0px !important;
}

#left-column #view-other{
    padding-left:5px;
    padding-top:5px;
}

#left-column #view-other .center{
    padding-top:0px;
    margin-top:0px;
    padding-left:10px;
    background: url("../../images/structural/view_other_slice.gif") repeat-y;
    width:185px;
    color: #16305d;
    font:bold 11px Arial;
    line-height:18px;
}

#left-column select{
    width: 165px;
}
/*Secondary Page - Right column styles*/
#right-column {
    float: right;
    width: 220px;
}
#right-column .callout{
    width:199px;
    margin-bottom: 10px;
}
#right-column .small-space{
    height:5px;
    font-size:1px;
    line-height:1px;
    background-color:#fff;
}
#right-column .large-space{
    height:10px;
    font-size:1px;
    line-height:1px;
}
#right-column .callout-body{
    margin-top:1px;
    width:inherit;
    background: url("../../images/structural/right_callout_slice.gif") repeat-y;
    color: #154965;
    font: 11px arial;
    line-height:16px;
}
#right-column .callout-content{
    padding:0px 10px;
}
#right-column .callout-content.right-arrow{
    padding:0px 10px 0px 26px;
    background:url("../../images/structural/right_callout_arrow.gif") no-repeat center left;
}

#right-column form{
    padding:0px;
    margin:0px;
}

#right-column label{
    font: 11px Arial;
    color: #353b2f;
    line-height: 18px;
}
#right-column .textbox{
    width:170px;
    border:1px solid #dcdcdc;
}
#right-column .button{
    background-color: #9d5113;
    margin-top:5px;
    margin-bottom:5px;
}
#right-column .text-arrow{
    color:#9d5113;
    font: 11px Arial;
}

#right-column .text-arrow.spotlight{
    color:#4f554a;
}

#right-column a:link, #right-column a:hover, #right-column a:visited{
    display:inline;
    color:#4f554a;
}
#right-column ul{
    padding:0px;
    margin:0px;
    list-style-type:none;
}
#right-column ul li{
    background: url("../../images/structural/text_arrow_img.gif") no-repeat top left;
    padding: 0px 0px 7px 10px;
}
#right-column ul li a{
    color: #154965 !important;
    font:11px arial;
    line-height:13px;
}
#right-column .thumbnail{
    border:1px solid #b9cddf;
    float:left;
    margin-right:5px;
}

/*Secondary Page - Center column styles all styles with the .wide class mean that the style*/
#center-column {
    margin-left: 210px;
    margin-right: 230px;
    margin-top:0px;
    line-height:16px;
    font: 11px Arial;
    padding:0px;
    position:relative;
    z-index:0;
}
.wide #center-column {
    margin-right:20px !important;
}
#center-column p{
    margin-top:0;
    margin-left:0;
}
#center-column .left{
    margin:0px 10px 0px 5px;
    float:left;
}
#center-column .right{
    margin:0px 5px 0px 10px;
    float:right;
}
#center-column .page-image{
    border: 1px solid #b9cddf;
}
#center-column .button{
    background-color: #16305d;
    margin-top:5px;
    margin-bottom:5px;
    margin-right:5px;
}
#center-column .button.orange{
    background-color: #9d5113;

}
#center-column label.bold{
    font:bold 11px Arial;
    color:#535353;
}

#center-column .grey-text-field{
    border:1px solid #dcdcdc !important;
    width:160px;
}
#center-column select{
    border: 1px solid #e1e1e1;
    color:#16305d !important;
    font:11px Arial;
}

/*Quote Callout Styles, There are the following style options: 
green-small - this is the regular quote callout font on the secondary page tempalte. It was made to float left or right in the center column of a 3 column page. In order to get this version of the quote callout not to leave a large top margin, i have used span ionstead of div. Thsi is why i used a lot of display:block;
grey-small - same as the green-small but is grey instead.
grey-right - this is a grey quote callout made for the right hand column of a 3 column layout 
green-right: this is the same as the grey-right only green. 
grey-half: this is a grey callout made to take up half the width of a 2 column layout
grey-full: this is a grey quote callout made to take up the full width of a 3 column layout
in order for this to degrade gracefully in IE 5.5, i wanted to put a background color on the quote callout div, this however made things not look right in IE 6. I am not sure how to fix this here. */

.quote-callout{
    display:block;
    margin-top:10px !important;
    margin-bottom:10px !important;
}
.quote-callout.green-small{
    width:170px !important;
    background: url("../../images/structural/green_quote_top_small.gif") no-repeat;
    padding-top: 8px!important;
    /*background-color:#d9e8d5;*/
    
}
.quote-callout.grey-small{
    width:170px !important;
    background: url("../../images/structural/grey-small-quote-top.gif") no-repeat;
    padding-top: 8px!important;
    /*background-color:#e1e1e1;*/
}
.quote-callout.grey-right{
    width:199px !important;
    background: url("../../images/structural/grey-right-quote-top.gif") no-repeat top left;
    padding-top: 8px !important;
    /*background-color:#e1e1e1;*/
}
.quote-callout.green-right{
    width:198px !important;
    background: url("../../images/structural/green-right-quote-top.gif") no-repeat top left;
    padding-top: 8px !important;
    /*background-color:#d9e8d5;*/
}
.quote-callout.grey-half{
    width:355px !important;
    background: url("../../images/structural/grey-half-quote-top.gif") no-repeat;
    padding-top: 8px!important;
    /*background-color:#e1e1e1;*/
}
.quote-callout.grey-full{
    width:521px !important;
    background: url("../../images/structural/grey-full-quote-top.gif") no-repeat;
    padding-top: 8px!important;
    /*background-color:#e1e1e1;*/
}

.quote-callout.green-small .callout-body{
    background-color:#eef4ec;
    border-right:1px solid #d9e8d5;
    border-left:1px solid #d9e8d5;
    width:168px;
}
.quote-callout.grey-small .callout-body{
    background-color:#f4f4f4;
    border-right:1px solid #e1e1e1;
    border-left:1px solid #e1e1e1;
    width:168px;
}
.quote-callout.grey-half .callout-body{
    background-color:#f4f4f4;
    border-right:1px solid #e1e1e1;
    border-left:1px solid #e1e1e1;
    width:353px;
}
.quote-callout.grey-right .callout-body{
    background-color:#f4f4f4;
    border-right:1px solid #e1e1e1;
    border-left:1px solid #e1e1e1;
    width:197px !important;
}
.quote-callout.green-right .callout-body{
    background-color:#eef4ec !important;
    border-right:1px solid #d9e8d5;
    border-left:1px solid #d9e8d5;
    width:196px !important;
    background-image:none !important;
}
.quote-callout.grey-full .callout-body{
    background-color:#f4f4f4;
    border-right:1px solid #e1e1e1;
    border-left:1px solid #e1e1e1;
    width:519px;
}
.quote-callout .callout-body{
    padding-bottom:8px;
    display:block;
}
.quote-callout .callout-body .quote-content{
    padding:0px 20px 0px 20px;
    font: 8pt Arial;
    color:#154965;
    display:block;
}

.quote-callout .callout-body .content{
    padding: 5px 10px 0px 10px;
    font: 8pt Arial;
    color:#154965;
    display:block;
}
.quote-callout .callout-body .thin-margin{
    padding: 5px 5px 0px 5px!important;
}
 .quote-callout .callout-body .content ul, #center-column .callout .callout-body .content li{
    margin-bottom:0;
}

 .quote-callout .callout-body .open-quote{
    background: url("../../images/structural/open_quote.gif") no-repeat bottom left;
    height: 20px;
    margin-left:8px;
    display:block;
}
.quote-callout .callout-body .close-quote{
    background: url("../../images/structural/close_quote.gif") no-repeat top right;
    height: 12px;
    margin-right:8px;
    display:block;
}
 .quote-callout.green-small .callout-footer{
    background: url("../../images/structural/green_quote_bottom_small.gif") no-repeat;
}
.quote-callout.grey-small .callout-footer{
    background: url("../../images/structural/grey-small-quote-bottom.gif") no-repeat;
}
.quote-callout.grey-half .callout-footer{
    background: url("../../images/structural/grey-half-quote-bottom.gif") no-repeat;
}
.quote-callout.grey-right .callout-footer{
    background: url("../../images/structural/grey-right-quote-bottom.gif") no-repeat;
}
.quote-callout.green-right .callout-footer{
    background: url("../../images/structural/green-right-quote-bottom.gif") no-repeat;
}
.quote-callout.grey-full .callout-footer{
    background: url("../../images/structural/grey-full-quote-bottom.gif") no-repeat;
}
.quote-callout .callout-footer{
    width:100%;
    height:8px;
    font-size:8px;
    line-height:8px;
    display:block;
}
.quote-callout .callout-body .content form{
    border:0;
}
.quote-callout .callout-body .content select#popular_databse{
    margin-top:5px;
    width:333px;
}

/* These are the secondary bulleted list styles The default is a square bullet and grey text. this can also be attained by using the square-bullet class on the UL to get an organe arrow and blue text, use the arrow-bullet class on the UL. To get the blue arrow, use the blue-arrow-bullet class on the UL */


#center-column ul{
    margin-top:0px!important;
    margin-left:0px !important;
    padding:0px
}
ul.square-bullet li{
    background: url("../../images/structural/secondary_bullet.gif") no-repeat top left !important;
    padding-top:0px;
    padding-left:10px;
    margin-left: 0px;
    list-style: none;
    color:#585959;
}
#center-column li{
    margin-top:5px;
    padding-top:0px;
    padding-left:10px;
    margin-left: 0px;
    list-style: none;
    color:#585959;
    background: url("../../images/structural/secondary_bullet.gif") no-repeat top left;
    margin-bottom:0px;
    padding-bottom:0px;
}
ul.arrow-bullet li{
    margin-top:5px;
    padding-top:0px;
    padding-left:10px;
    margin-left: 0px;
    list-style: none;
    color:#16305d;
    background: url("../../images/structural/arrow_orange.gif") no-repeat top left;
    margin-bottom:0px;
    padding-bottom:0px;
}
#center-column ul.blue li{
    color:#16305d;
}

#center-column ul.blue li a{
    color:#16305d; 
}
#center-column ul.blue-arrow-bullet li{
    background: url("../../images/structural/arrow_blue.gif") no-repeat top left;
    margin-top:5px;
    padding-top:0px;
    padding-left:10px;
    margin-left: 0px;
    list-style: none;
    color:#16305d;
    margin-bottom:0px;
    padding-bottom:0px;
}


/*Center column block callouts. these are the callouts that look almost as if they are one row tables wioth the large header bar. See the 3-column group 1 layout tempalte page.*/
#center-column .block-callout{
    background-color:#e4e4e4;
    width:256px;
    border-top:5px solid #d5e2d0;
    margin-bottom:10px;
    text-align:left;
}
#center-column .block-callout.full{
    width:522px !important;
}
#center-column .block-callout.store-form .textbox{
    width:100%;
    border:1px solid #cfd2d4;
    margin-bottom:5px;
}
#center-column .block-callout .header{
    background: url("../../images/structural/centerCalloutArrow.gif") no-repeat left center;
    border-top:1px solid #fff;
    font:bold 12px Arial;
    line-height:16px;
    padding-left: 24px; 
    padding-top: 6px;
    padding-bottom:5px;
    color:#16305d;
}
#center-column .block-callout .body{
    background-color:#f7f7f7;
    font:11px Arial;
    padding-bottom:5px;
}
#center-column .block-callout .body .content{
    padding: 5px 10px 0px 10px;
    font:11px Arial;
}

#center-column .small-left-margin{
    margin-left:5px;
}
#center-column div.horizontal-space{
    height:10px;
    font-size:10px;
    line-height:10px;
}


/*Styles for DB search form example UPE#2*/
#center-column .master-db-search select#categories{
    width:325px;
}
#center-column .master-db-search select#databases{
    width:545px;
}
#center-column div.master-db-search{
    margin-bottom:0px !important;
}


/*Styles for search DB by Alpha*/
.search-db-alpha a {
    font:11px arial;
    line-height:16px;
    color: #16305d;
    text-decoration: underline;
}
.search-db-alpha a:hover, .search-db-alpha a.selected{
    background-color: #e5e5e5;
}

/*All table styles for secondary pages*/
#center-column div.table-container table {
    width: inherit;
    border-top: 1px solid #fff;
}

#center-column div.table-container table img{
    border: 1px solid #aec6a5;
}

#center-column div.table-container table td{
    border-bottom:1px solid #fff;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    font:11px Arial;
    border-left:1px solid #fff;
    vertical-align:top;
}
#center-column div.table-container table td.first{
    border-left:0px;
}

#center-column div.table-container table tr.odd td{
    background-color:#f7f7f7;
}
#center-column div.table-container table tr.even td{
    background-color:#e9e9e9;
}
#center-column div.table-container table tr th{
    background-color:#dbe9d6;
    color:#16305d;
    font:bold 11px Arial;
    text-align:left;
    padding: 5px 10px 5px 10px;
    border-left:1px solid #fff;
    border-bottom: 1px solid #fff;
    vertical-align:middle;
}

#center-column div.table-container table tr th.first{
    border-left:0px;
}
#center-column div.table-container table tr.sub-header th{
    background-color:#edf4eb;
    color:#535353;
    font-weight:bold;
}
#center-column div.table-container{
    border-top: 5px solid #aec6a5;
    padding:0;
    margin:0;
    margin-bottom: 10px;
    width:522px !important;
}
div.wide #center-column  div.table-container{
    width:735px !important;
}
#center-column div.table-container.footer{
    border-bottom: 5px solid #e1e1e1;
}


<!-- Styles for a 2 column table on a 2 column page. Bryan, this is weird, if i remove this comment, the page breaks in IE... do you knwo why??-->

div.two-column table{
    background-color:none;
    width:522px;
    clear:none;
}

div.wide div.two-column table{
    width:inherit;
}

div.two-column table tr td{
    vertical-align:top;
    width:256px;
}
div.wide .two-column table tr td{
    width:355px;
}
.two-column td.space{
    width:10px;
}
div.wide .two-column table tr td.space{
    width:24px;
}
table td.space.bar{
    background:url("../../images/structural/vertical-bar.gif") repeat-y top center;
    border-bottom:0;
}


/*Styles the Database search form*/
#center-column .table-container.form{
    margin-bottom:0 !important;
}
#center-column .table-container.form table table, #center-column .table-container.form table table tr, #center-column .table-container.form table table tr td{
    border:0;
    padding:0;
    margin:0;
}
#center-column .table-container.form table{
    width:100%;
}
.contentText{
    font-weight:bold;
}
#center-column .table-container.form.first table table tr td{
    vertical-align:bottom;
}
#center-column .table-container.form  table table input{
    border:1px solid #cfd2d4;
}


.required{
    color:#ce5e04 !important;
    font:bold 12px Arial;
    line-height:11px;
}
#center-column .table-container.form.research table table{
    width:auto;
}
#center-column .table-container.form.research table table td{
    width:240px;
    padding-bottom:10px!important;
}
#center-column .table-container.form.research table table .text-field{
    width:239px;
    border:1px solid #cfd2d4;
}
#center-column .table-container.form.research table table select{
    border:1px solid #cfd2d4;
    width:100%;
}

#center-column .table-container.form.research table table textarea {
    width:239px;
    height:80px;
    border:1px solid #cfd2d4;
}
#center-column .table-container.form.research td.space{
    width:10px !important;
}
/*DB Results table styles UPE#6*/
#center-column div.results table{
    background-color:#efefef;
    width:735px;
}
#center-column div.results table tr{
    background-color:#efefef;
}
#center-column div.results table tr th{
    background-color:#bfd5b7;
    color:#16305d;
    font:bold 11px Arial;
    text-align:left;
    padding: 5px 10px 5px 10px;
    border-left:1px solid #fff;
    border-bottom: 1px solid #fff;
    vertical-align:middle;
}

#center-column div.results table td{
    border-bottom:1px solid #fff;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    font:11px Arial;
    border-left:1px solid #fff;
    vertical-align:top;
}
#center-column div.results table td a{
    font-weight:normal;
}
#center-column div.results table td.first, #center-column div.results table th.first{
    border-left:0px;
}

#center-column div.results table tr.open a{
    font:bold 11px Arial;
    color:#353b2f;
    text-decoration:none;
}
#center-column div.results table tr td.sub-result{
    padding-left:20px;
}
#center-column div.results table tr td.strong{
    font-weight:bold;
}

/*This is the styles for the login section on UPE #8*/
.login{
    width:355px;
}

.login table tr td{
    text-align:left !important;
}
.login table table input.text{
    border:1px solid #dcdcdc;
    width:170px;
}

.login acronym{
    border-bottom:0;
}
.login a{
    color:#16305d;
    font-weight:normal;
}
.login table{
    color:#9d5113;    
}
.login table table{
    color:#535353;
    font:bold 11px Arial;    
}
.login tr.login_img td{
    background: url("../../images/structural/login_image.gif") no-repeat center left !important;
    height: 30px;
}
.login #submit1{
    background-color: #9d5113;
    margin-top:5px;
    margin-bottom:5px;
    color:#fff;
    font: bold 11px Arial;
    border:0;
}
/*styles for the table on the Our Library landing page*/
.library-table table td{
    padding:5px 0px 5px 10px;
}
.library-table table{
    width:512px !important;
}