/******************************
* EarthSystemCog
*
* cogstyle.css
*
* this file specifies the CSS for _all_ HTML pages that are part of the CoG project
* except where:
* 1) internal CSS is encoded within Django Templates, for example:
*    - "/cog/templates/cog/project/project_right.html" specifies the project widget styles
*    - "/cog/templates/cog/common/cog_header.html" specifies the CoG header styles
* 2) inline styles are used within Django Templates
* 3) external plugins use their own CSS (ie: CKEditor, YUI)
* 4) users explicitly write custom inline styles in CoG's wiki
* 5) the CoG splash page has its own stylesheet (cog.css)
*
* sections (marked by BEGIN/END comments) define logical groupings of elements
* each element is given a summary above it's definition; this includes the NAME, SCOPE, and - where apprpropriate - DESCRIPTION or PURPOSE
* additional information may be added above individual attributes
******************************/

/******************************
* CSS used w/in CoG
* (for reference):
* dark teal    = #358C92 navigation bar
* light teal   = #B9E0E3 headers and accordions
* lightest teal = #E9F5F6 custom header
* light blue   = #E9F5F6  custom footer
* dark yellow  = #FAC24A bar with technical support
* light yellow = #FCE79F headers
* lightest yellow = #FCF2CE table dividers, some message boxes
* dark gray    = #666
* light gray   = #CCCCCC


******************************/

/******************************
BEGIN MEDIA-SPECIFIC STYLES
******************************/

/* only display the central content when printing */
@media print {
	div.vertical_menu {
		display: none !important;
	}
	div.project_widget {
		display: none !important;
	}
	div.search-box {
		display: none !important;
	}
	div.peer-nodes-box {
		display: none !important;
	}
	div#top_nav_right {
		display: none !important;
	}
}

/******************************
END MEDIA-SPECIFIC STYLES
******************************/


/******************************
BEGIN PAGE-LEVEL ELEMENTS
******************************/

/***************
* NAME: html
* SCOPE: the entire page
* PURPOSE: force the browser's vertical scrollbar to always display
***************/
html {
    overflow-y:  scroll;
    height:      100%;
}

/***************
* NAME: body
* SCOPE: the page body content
* DESCRIPTION: center the body, specify the font, font-color, and background color
***************/
/*****************************
BEGIN DJANGO and YUI CSS RESETS

Django contains numerous CSS files that set many properties not
explicitly covered in the areas below. These are reclaimed here so that we
can completely control in one file how things look
*******************************/
body{

    /* px to pt ratio = 1.33 */
    font: normal normal normal 12px/1.231 Arial,sans-serif;

    color:          #333;       /* text color...dark grey*/
    text-align:     left;       /* default alignment is left-justified */
    margin:         0;         /* remove all margins in the box model */
    padding:        0;
    margin-right:   auto;
    margin-left:    auto;
    vertical-align: baseline; /* this is the default, be we want to control */
    width:          100%;     /*go the entire size of the browser. custom header is in this and also goes the entire way */
    height:         100%;
    background-color: white;
}


/* turn off image borders by default */
img{
        border: none;
}
/*********************************
BEGIN: Content wrappers
**********************************/

.container:after{
   content: normal; /* critical */
   height:  100%;

}

/* create a sticky footer. This div pushes the footer down the full height of the browser window
but then enables the footer bar to be at the bottom */
div.content_wrapper{
    height:         100%;  /* extend the full height of the browser. If browser is small, won't go smaller than div.main_conent */
    margin-bottom:  -90px; /*t his needs to be the same height as the custom footer height + footer height + footer spacer height */
}

/* moves footers down when the body exceeds the window and you have to scroll */
div.push{
   height: 90px; /* value is the height of the two footers + the footer spacer */
}

/**********************************
BEGIN: Custom header
This sets the styles for the defaults
*********************************/

/* create white header bar that spans the entire browser window */
div.custom_header_bar {
    width:            100%;
    margin-top:       0;
    margin-bottom:    2px;
    background-color: #E9F5F6; /* light blue */

}

/* create a white header that is just slightly larger than the main cog site */
div.custom_header{
    width:        1140px;
    margin-left:  auto;
    margin-right: auto;
}

td.custom_header_esgf_cog{
    width:          180px; /*width of logo */
    vertical-align: top;
    margin:         0;
    padding:        0;
    padding-top:    3px;
    padding-bottom: 1px; /* Cecelia wanted this 1px larger than the top */
}

td.powered_by{
    width:          60px;
    font-size:      10px; /* 2px smaller than base font */
    font-weight:    bold;
    font-style:     italic;
    vertical-align: top;
    color:          #666;
    text-align:     right;
    padding-right:  0;
    padding-top:    4px;
}

td.hosted_by{
    width:          60px;
    font-size:      10px; /* 2px smaller than base font */
    font-weight:    bold;
    font-style:     italic;
    vertical-align: top;
    color:          #666;
    text-align:     left;
    padding-right:  0;
    padding-top:    4px;
}

td.custom_header_location{
    vertical-align: top;
    font-size:      12px;
    color:          #666;
    line-height:    1.35;
    text-align:     left;
    padding:        1px;
    padding-top:    4px;
    padding-left:   2px;
    padding-right:  6px;
}
td.custom_header_welcome{
    vertical-align: top;
    font-size:      12px;  /* note this is in px and not pt */
    color:          #666;
    font-style:     italic;
    line-height:    1.35;
    width:          350px; /*may need to make this larger if people have large names for their nodes */
    text-align:     right;
    padding:        1px;
    padding-top:    4px;
    padding-left:   6px;
    padding-right:  6px;
}

/**********************************
BEGIN: Custom footer
This sets the styles for the defaults
*********************************/

/*the footer bar goes across the entire browser window while the footer stays within the Django grid span-24 */
div.custom_footer_bar{
    width:              100%;
    background-color:   #666; /*gray */
    position:           relative;
}

/* create a custom footer that is slightly larger than the main cog site */
div.custom_footer {
    width:        1140px;
    margin-left:  auto;
    margin-right: auto;
    color:        white; /*text color */
}

.custom_footer table{
  height: 40px;    /* set table height to be what we want the footer to be and the text will be centered in that */

}

.custom_footer td{
    vertical-align: middle;
    font:           normal normal 11px/1.231 Arial,sans-serif;
    padding:        0; /* ensure text lines up with left navigation bar */
}

.custom_footer td a:link, .custom_footer td a:hover, .custom_footer td a:visited{
   color:           white;
   text-decoration: underline;
}


/**********************************
BEGIN: CoG footer
/*********************************/

/*the footer bar goes across the entire browser window while the footer stays within the Django grid span-24 */

div.footer_bar{
    width:              100%;
    background-color:   #e9f5f6;  /*light blue*/
    clear:              both;     /*this puts the footer on top of any content that might be below it*/
}

/* gives the footer a margin below the content of the page */
div.footer_spacer{
      height:           10px;  /* value needs to be the same as "standard spacing" of the site, currently 10px */
      background-color: white;
}

div.footer{
  font-size:    11px;
  margin-left:  auto;
  margin-right: auto;
  height:       40px;
  width:        1140px;
}

.footer td{
    vertical-align: middle;
    font:           normal normal 11px/1.231 Arial,sans-serif;
    color:          #666;
    padding:        0;    /*ensure the table lines up with the left navigation bar */
    padding-top:    3px;  /* nice spacing in the div and between the two table rows */
}

/*override standard table with that has gray rows*/
.footer tbody tr:nth-child(even) td, .footer tbody tr.even td {
 background-color :#e9f5f6;
}

/****************************
BEGIN FIXES FOR IE
/****************************/

/* force IE9 and below to center the content in the body
IE10+ no longer accepts conditionals
*/
.ie6 body, .ie7 body, .ie8 body, .ie9 body{
    margin-right:  auto;
	margin-left:   auto;
    margin-top:    0;
	margin-bottom: 0;
    text-align:    left;
}

/* adjust bullets which are outside by default in IE */
.ie6 ul, .ie7 ul, .ie8 ul, .ie9 ul{
     margin:              0;
     padding:             0;
     list-style-position: inside;
}

/*force IE to behave the same as other browsers */
.ie9 hr {
    background:    #358C92;
	border:        none;
	height:        1px;
	margin-bottom: 4px;
	margin-top:    4px;
}

/* checkboxes and labels don't align correctly in IE9. */
.ie9 input[type=checkbox]{
    vertical-align: -3px;
}

/* non-IE version */
/* used in file upload form */
td.checkbox_label {
    vertical-align: middle;
}

/* IE10+ modifications */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

           input[type=checkbox] {
               vertical-align: bottom;
               position:       relative;
               top:            2px;

           }

           label {
               vertical-align: bottom;
           }
           td.checkbox_label {
               vertical-align: bottom;
           }
       }


/*******************************
BEGIN: headers
*******************************/
h1 {
	color:             #666;
	font-size:         21px;
	font-weight:       bold;
    line-height:       1;
    margin:            0;   /* we should not have to set these here */
    padding:           0;  /* we should not have to set these here */
    margin-bottom:     10px;
    text-align:        left;
}
h2 {
	color:       #666;
	font-size:   18px;
	font-weight: bold;
}
h3 {
	color:       #666;
	font-size:   16px;
	font-weight: bold;
}
h4 {
	color:       #666;
	font-size:   16px;
	font-weight: bold;
	font-style:  italic;
}
h5 {
	color:       #666;
	font-size:   14px;
	font-weight: bold;
}
h6 {
	color:       #666;
	font-size:   14px;
	font-weight: bold;
	font-style:  italic;
}


/***************
* NAME: horizontal rule
* SCOPE: the page body content
***************/
hr {
    background-color:  #358C92; /* dark teal */
	margin-bottom:    4px;
	margin-top:       4px;
    border:           none;  /* needed because icon library styles hr */
}

/***************
* NAME: links
* SCOPE: the page body content
* DESCRIPTION: control how links are displayed
***************/
a:link, a:visited {
    /* keep the same style for links regardless of whether they've been visited */
    color:           #358C92;    /* dark teal */
    text-decoration: none;
}
a:hover {
    /* only change the style of a link while a user is hovering over it */
	color:           #358C92; /*dark teal */
	text-decoration: none;
}

/******************************
END PAGE-LEVEL ELEMENTS
******************************/


/******************************
BEGIN EMPHASIS ELEMENTS
******************************/

/* for 508 compliance, bold tags and italics tags must be replaced by emphasis tags */

em.message {font-style: italic;} /* used for text that is meant to be a message to the user */

em.attribute {font-weight: 700; font-style:normal;} /* style only...for table headers */

em.bold {font-weight: 700; font-style:normal;} /* misc style only */

.white {
	background-color: #FFFFFF;
}

.gray {
    background: #eee;

}

.green
{
    background: transparent;
}

.invisible {
	display: none;
}


/******************************
BEGIN TABLE ELEMENTS
******************************/

/***************
* NAME: table
* SCOPE: the page body content
***************/
table {
        /* prevent nested cells' borders or spacing from accumulating */
	border-collapse: collapse;
	border-color:    #CCCCCC;
	margin-bottom:   0;
	margin-left:     0;
}

tbody tr:nth-child(2n), table tbody tr.even{
    vertical-align:   middle;
    font-size:        12px;
    padding:          4px;
    background-color: #eee /*light-gray */
}

/* background color for cells in even rows */
/* (no need to explicitly specify background of the other rows; they inherit from body) */
tbody tr:nth-child(even) td, table tbody tr.even td {
    background-color: #eee /* light-gray */
}

/* additional styles were added to support tables swap the order of alternating row colors; */
/* either starting w/ the "even" color, "odd" color, or no color */

/* TODO: double-check that these classes are still being used */

/* style for cells in an even row */
/* style for cells in an even row in an "even-first" colored table */
table.even-color tbody tr:nth-child(even) td, tbody tr.even td {
    background-color: #eee /*light-gray */
}

/* style for cells in an odd row */
/* style for cells in an odd row in an "even-first" colored table */
table.even-color tbody tr:nth-child(odd) td, tbody tr.odd td {
	background-color: #FFFFFF;
}

/* style for cells in an odd row */
/* style for cells in an odd row in an "odd-first" colored table */
table.odd-color tbody tr:nth-child(odd) td, tbody tr.odd td {
    background-color: #eee /*light-gray */
}

/* style for cells in an even row */
/* style for cells in an even row in an "odd-first" colored table */
table.odd-color tbody tr:nth-child(even) td, tbody tr.even td {
	background-color: #FFFFFF;
}

/* style for all cells in a non-colored (ie: no alternating color) table */
table.no-color td{
	background-color: #FFFFFF !important;
}

/* for use in the custom header for JPL */
table.transparent tbody tr:nth-child(even) td, tbody tr.even td{
    background-color: inherit;
}

/* for tables that are entirely gray. Used when a table is embedded in another table with a dark row */
/* TODO remove the td here */
table.gray td{
        background-color: #eee !important;
}

/***************
* NAME: caption
* SCOPE: the caption of a table
* used in lots of places outside of the wiki
***************/

/* set default for cog outside of the wiki */
caption {
	margin:        0;
	padding:       2px 5px 3px 5px;
	font-size:     12px; /* this needs to be the same size as other headers on the site */
	text-align:    left;
	font-weight:   bold;
	background:    #B9E0E3;
    border-bottom: 1px solid #CCCCCC;
	color:         #666;
}

#cog_post_body caption {

    margin:        0;
	padding:       2px 5px 3px 5px;
	font-size:     12px; /* this needs to be the same size as other headers on the site */
	text-align:    left;
	font-weight:   bold;
	background:    #C3D9FF;
	border-bottom: 1px solid #CCCCCC;
	color:         #666;
}

/***************
* NAME: table cells (standard data and headers)
***************/

/* set defaults for all tables and headers on the site. Make table data and table headers have the same size */
td, th {
    margin:         0;
    padding:        4px;
    vertical-align: middle;
    font-size:      12px;
    font-weight:    normal; /* override topography.css */
}

/* table headers in the wiki */
#cog_post_body th {
    font-weight: bold;
    background:  none repeat scroll 0 0 #B9E0E3;
    padding:     5px;
    font-size:   12px;
}

/* the next classes are applied to adjust the spacing of tables in specific circumstances */

.long {
	width:          99%;
	text-align:     left;
	vertical-align: top;
}

.long_middle {
	width:          100%;
	text-align:     left;
	vertical-align: middle;
}


td.head {
	text-align:  left;
	font-weight: bold;
}

td.tophead {
	text-align:     left;
	font-weight:    bold;
	vertical-align: top;
}

td.caption_mimic{
    background-color: #B9E0E3;
    text-align:       left;
    color:            #666;
    border-bottom:    1px solid #CCCCCC;
}

td.righttop {
	text-align:     right;
	vertical-align: top;
}

.top {
	vertical-align: top;
}

.right {
	text-align:     right;
	vertical-align: middle;
}

.left {
	text-align:     left;
	vertical-align: middle;
}

/* used on templated content, both views and forms */
td.leftcolumn {
        width:          160px;
		text-align:     right;
		vertical-align: top;
}


/*****************************
* TEST code for Gerhard to
* format code snippets
*****************************/
td.numbers{
padding-right: 10px;
color:         #A0A0A0;
text-align:    right;
padding-top:   0;
}

td.code{
padding-top:      0;
background-color: #EFEFFF;
border:           1px solid  #C0C0D0;
padding-right:    50px;
}
/******************************
END TABLE ELEMENTS
******************************/


/******************************
BEGIN FORM ELEMENTS
******************************/
/***************
* NAME: all buttons
* SCOPE: the current form
* DESCRIPTION: forces a white background w/ black text and grey border
***************/
.button,input[type=submit],input[type=button],input[type=reset],input[type=file],.submit-row input {
        /* force a white background by combining a color with a white image */
        /* TODO: why is this forcing needed here, but not on other form elements? */
	background:   white url(/static/cog/img/nav-bg.gif) bottom repeat-x;
	padding:      3px 5px;
	color:        black;
    border:       1px solid #CCCCCC;
	margin-bottom:5px;
	margin-right: 2px;
	margin-top:   5px;
}
/* project browser buttons */
input.right_go{
	background:     white url(/static/cog/img/nav-bg.gif) bottom repeat-x;
    width:          28px;
	margin-right:   0;
    margin-left:    3px;
    height:         22px;
	padding-top:    2px;
    padding-bottom: 2px;
    padding-left:   3px;
    padding-right:  3px;
	color:          black;
    border:         1px solid #CCCCCC;
	font-size:      11px;
}

/***************
* NAME: text input
* SCOPE: the current form
***************/

input[type=text] {
    border:       1px solid #CCCCCC;
	background:   #FFFFFF;
	color:        #5D781D;
	width:        99%; /* same width as all other types of inputs */
	padding-left: 2px; /* space before text starts */
	height:       16px;
}

input[type=checkbox]{
    vertical-align:   baseline; /* default but want to make sure so we can do ie fixex */
	margin-left:      0;        /* so they line up nicely in tables */
}


input[type=password] {
    border:       1px solid #CCCCCC;
	background:   #FFFFFF;
	color:        #5D781D;
    width:        99%; /* same width as all other types of inputs */
    padding-left: 2px; /* space before text starts */
	height:       16px;
}

input[type=url] {
    border:       1px solid #CCCCCC;
	background:   #FFFFFF;
	color:        #5D781D;
    width:        99%; /* same width as all other types of inputs */
    padding-left: 2px; /* space before text starts */
	height:       16px;
}

/* allow for text inputs that span their entire container */
.long input[type=text] {
	width: 99%; /* same width as all other inputs and features that use .long (e.g. table cells) */
}

textarea {
	overflow:     auto; /* display scrollbars as needed */
    border:       1px solid #CCCCCC;
	width:        99%; /* not 100% because it provides a nice margin inside a table */
    padding-left: 2px; /* space before text starts */
}

.required {
	font-weight: bold; /* = 700 */
}

.optional {
	font-weight: normal;
}


/******************************
END FORM ELEMENTS
******************************/


/******************************
BEGIN CHANGES TO THE WIKI
******************************/
/* These are the styles in the pulldown menu */
small {
	font-size:  11px;
}

strong {
	font-weight: bold;
}

/* prevent the wiki editor from resizing horizontally */
textarea.ckeditor { resize: vertical; }

/******************************
END CHANGES TO THE WIKI
******************************/


/******************************
BEGIN SPECIFIC ACTIONS
******************************/

.addlink {
	padding-left: 12px;
	background:   url(/static/cog/img/icon_addlink.gif) 0 .2em no-repeat;
}

.listlink {
	padding-left: 12px;
	background:    url(/static/cog/img/icon_listlink.gif) 0 .0em no-repeat;
}

.changelink {
	padding-left: 12px;
	background:    url(/static/cog/img/icon_changelink.gif) 0 .2em no-repeat;
}

.privatelink {
	padding-left: 12px;
	padding-top:   2px;
	background:    url(/static/cog/img/icon-lock-small.png) 0 .2em no-repeat;
}

.restrictedlink {
	padding-left: 12px;
	padding-top:   2px;
	background:    url(/static/cog/img/icon-lock-small.png) 0 .2em no-repeat;
}

.deletelink {
	padding-left: 12px;
	background:    url(/static/cog/img/icon_deletelink.gif) 0 .25em no-repeat;
}

.arrowrightlink {
	padding-left: 12px;
	padding-top:  2px;
	background:   url(/static/cog/img/icon_arrowrightlink.png) 0 .25em no-repeat;
}

/******************************
END SPECIFIC ACTIONS
******************************/

/******************************
BEGIN COLUMN ELEMENTS & ROLLUPS
******************************/

/* note: a significant portion of the left/right column styles is specified internally w/in Django Templates */
/* the following styles do not provide all of the look-and-feel */

/******************************
BEGIN VERTICAL MENU (LEFT NAVBAR)
******************************/

/* the box around the entire menu */
.vertical_menu {
    border:        1px solid #cccccc;
	border-top:    0;
	margin-bottom: 10px;
	margin-top:    0;
	background:    white;
}

.vertical_menu table {
	margin: 0;
}

/* this is the upper section of the left nav bar */
.vertical_menu table td {
	font-size:        11px; /* one size smaller than base font */
	text-align:       left;
	vertical-align:   top;
    padding:          1px 0 0 1px;
	margin:           0;
	background-color: white;
}

/*SJM...the alternating colors should be limited to the wiki rather than set globally and then contradicted??*/

/* prevent alternating table row styles from affecting vertical_menu content */
.vertical_menu tbody tr:nth-child(even) td,tbody tr.even td {
	background: white;
}
/* These two items need to be the same except for the color */

.right_widget_header {
        margin:           0;
	    padding-top:      2px;
	    padding-bottom:   2px;
	    padding-right:    5px;
	    padding-left:     5px;
	    font-size:        12px;
	    text-align:       left;
	    font-weight:      bold;
	    color:            #666;
	    background-color: #FCE79F; /* dark yellow */
}

/* left nav bar section headers (light teal) */
.left_widget_header {
        margin:           0;
	    padding-top:      2px;
	    padding-bottom:   2px;
	    padding-right:    5px;
	    padding-left:     5px;
	    font-size:        12px;
	    text-align:       left;
	    font-weight:      bold;
	    color:            #666;
	    background-color: #B9E0E3; /*light teal*/
}
/* left nav bar project header (dark teal) */
.left_upper_widget_header {
        margin:           0;
        padding-top:      2px;
	    padding-bottom:   2px;
	    padding-right:    5px;
	    padding-left:     5px;
	    font-size:        12px;
	    text-align:       left;
	    font-weight:      bold;
	    color:            white;
	    background-color: #358C92; /*dark teal*/
}

/* TODO is this even used anymore?? */
/* prevent body heading styles from affecting vertical_menu content */
.vertical_menu h3 {
	margin:           0;
	padding:          2px 5px 3px 5px;
	font-size:        12px;
	text-align:       left;
	font-weight:      bold;
	color:            #666;
	background-color: #B9E0E3;
	border-top:       1px solid #358C92;
	border-bottom:    1px solid #358C92;
}

/*lower section of the left nav bar */
.vertical_menu ul {
	margin:         0;
	padding-left:   4px;
	padding-bottom: 0;
	list-style:     none;
}

.vertical_menu li {
    /* line-height tweaked to match project browser elements */
	line-height: 19px;
	padding:     0;
	margin:      0;
	list-style:  none;
	font-size:   11px; /* needs to be the same as the upper section which is a table */
}

.vertical_menu li li {
	line-height:0;
	padding:    5px;
}

.vertical_menu li:first-child {
	border-top:0;
}

#vertical_menu li ul {
	padding-bottom: 30px;
}

/******************************
END VERTICAL MENU (LEFT NAVBAR)
******************************/




/******************************/
/* BEGIN TAG SELECTION BOX */
/******************************/

#id_tags{
   min-width:   200px; /*when there are no tags the box has no size*/
   border:      1px solid #CCCCCC;
   margin-left: 0; /* chrome actually adds a margin to all select boxes. Remove this. */
}


/******************************/
/* BEGIN PARENT/PEER SELECTION BOX */
/******************************/
/* used on the update project page */
.selectprojects{
    min-width:     300px;              /*when there are no tags the box has no size*/
    border:        1px solid #CCCCCC;
    margin-bottom: 5px; /* some extra space before the help text */
}
/******************************/
/* BEGIN TAG SELECTION BOX */
/******************************/


/******************************
BEGIN NEWS WIDGET
******************************/

.news_box {
    border:         1px solid #CCCCCC;
	margin-bottom:  10px;
    margin-top:     0;
	background:     #FFFFFF;
}

.news_header {
	background-color: #FCE79F;
	color:            #666;
	font-size:        12px;
}

.news_box_body {
	max-height: 120px;
	overflow-y: auto;
}

.news_box table td, .news_box table th {
	font-size: 11px;
	padding:   0;
	margin:    0;
}

.news_box table th {
	background-color: #FCE79F;
}

.news_box table.even-color tbody tr:nth-child(even) td,tbody tr.even td {
	background: #FCF2CE; /* lightest yellow */
}
.news_footer {
	margin:           0;
	padding:          2px 5px 3px 5px;
	font-size:        11px;
	text-align:       left;
	font-weight:      bold;
	background-color: #FCE79F;
	color:            #666666;
    border:           0;
    border-top:       1px solid #CCCCCC;
	display:          block;
}

/******************************
END NEWS WIDGET
******************************/


/**** BEGIN COMMENTS *****/
.box-comment {
	padding:    5px;
	margin:     2px;
	border:     0;
    background: #FFFFFF;
}

.box-comment .caption {
    color:         #666;
	background:    #B9E0E3;
	border:        1px solid #CCCCCC;
	margin-bottom: 3px;
	font-weight:   bold;
	font-style:    italic;
}

.box-comment2 {
	padding:    0;
	margin:     0;
	border:     0;
	background: #FFFFFF;
}

.box-comment2 .caption {
	color:         #666;
	background:    #B9E0E3;
    border-bottom: 1px solid #CCCCCC;
	margin-bottom: 3px;
	font-weight:   bold;
	font-style:    italic;
}

.box-comment2 .body {
	padding: 2px;
	margin:  2px;
}

/****** END COMMENTS ****/

/******************************
BEGIN USER MESSAGES
******************************/

/* cancel membership, password reset, how to cancel a membership, membership notification*/
.instruction-box {
    background:  #B9E0E3; /* light-teal */
	padding:     5px;
    border:      1px solid #CCCCCC;
	font-weight: bold;
	text-align:  center;
    font-size:   12px;
}


/*project registration notification, 10K other places */
.message-box {
    background:  #fce79f; /* light yellow*/
	padding:     5px;
	margin:      5px 0 5px 0;
    border:      1px solid #CCCCCC;
	font-weight: bold;
	text-align:  center;
    font-size:   12px;
}

.node-notification-box{
	background:    #666;
	color:         white;
	text-align:    center;
	padding:       10px;
	font-size:     12px;
	margin-top:    5px;
	margin-bottom: 10px;
}

/*update openID box. This should be removed when no longer needed */
.changeID-box {
    background:   #fce79f; /* light yellow */
	padding:      10px;
	margin-left:  auto;
    margin-right: auto;
    width:        80%;
    border:       1px solid #CCCCCC;
	font-weight:  bold;
	text-align:   center;
    font-size:    12px;
}

/* prevent error styles from affecting error content w/in search widget */
/*bad openid, bad IDP, failed login etc*/
.error-box {
    background:  red;
	padding:     5px;
	margin:      5px;
    border:      1px solid #CCCCCC;
	font-weight: bold;
	text-align:  center;
    color:       white;
    font-size:   12px;
}

/* used on login2, site index errors. Used for p tags */
.errornote {
	font-size:   12px !important;
    text-align:  center;
	display:     block;
	padding:     5px;
	margin:      4px;
    border:      1px solid #CCCCCC;
	color:       white;
	font-weight: bold;
	background:  red;
}

/****** END USER MESSAGES ****/


/******************************
BEGIN SEARCH WIDGET
******************************/

/* defines the box around the search widget */
.search-box {
	background:    #FFFFFF;
    border:        1px solid #CCCCCC;
	font-size:     11px;
    margin-bottom: 20px;
    margin-top:    20px;
}

.search_header {
	margin:            0;
	padding:           2px 5px 3px 5px;
	font-size:         12px;
	text-align:        left;
	font-weight:       bold;
	background-color:  #FCE79F; /* same as right widgets header */
    border-bottom:     1px solid #CCCCCC;
	color:             #666;
	display:           block;
}

/* Data Text Search */
.box-colored {
	background: #FCE79F; /*light yellow*/
    border:     1px solid #CCCCCC;
	font-size:  11px;
}

.box-globus {
	background: #FCE79F; /*light yellow*/
    border:     1px solid #CCCCCC;
	font-size:  12px;
	padding:    4px;
	height:     120px;
}

/*access control license.*/
.license-box {
    background:  #fce79f; /* light yellow*/
	padding:     10px;
	margin:      10px;
    border:      1px solid #CCCCCC;
	width:       720px;
	text-align:  left;
}

/* used to display data records on the search page and data car */
.padded-box {
	background: #FFFFFF;
	padding:    5px;
	margin-top: 5px;
	border:     1px solid #CCCCCC;
	text-align: left;
}

/******************************
END SEARCH WIDGET
******************************/

/******************************
BEGIN ADVANCED SEARCH PAGE
******************************/

.facet-category {
	font-size: 12px;
}

.facet-option {
	font-size:  12px;
	text-align: left;
}

.fieldset_box {
    border:        1px solid #CCCCCC;
	padding:       5px;
	text-align:    left;
	margin-top:    -10px;
	margin-bottom: 16px;
}

.fieldset_legend {
	color:       #000000;
	text-align:  left;
	font-weight: bold;
	padding:     2px;
}

/******************************
END ADVANCED SEARCH PAGE
******************************/

/******************************
BEGIN PEER-NODES-BOX
******************************/

.peer_nodes_box {
	background:    #FFFFFF;
    border:        1px solid #CCCCCC;
	font-size:     11px;
    margin-bottom: 10px;
    margin-top:    0;
}

.peer_nodes_box_body {
	padding:       4px;
	max-height:    112px; /* same as news box but subtract out the 4px top/bottom padding */
	overflow-y:    auto; /* turns on scroll bar */
}

/******************************
END PEER-NODES-BOX
******************************/

.caption {
	margin:           0;
	padding:          2px 5px 3px 5px;
	font-size:        12px;
	text-align:       left;
	font-weight:      bold;
	background-color: #000;
	color:            #666;
	display:          block;
}

/***************
* NAME: header_bar
* SCOPE: a box element
* DESCRIPTION: header_bar does not specify the actual page header, but rather the headings w/in boxes
***************/
.header_bar {
	margin:           0;
	padding:          2px 5px 3px 5px;
	font-size:        12px;
	text-align:       left;
	font-weight:      bold;
	background-color: #B9E0E3;
	color:            #666;
	display:          block;
}

/******************************
END COLUMN ELEMENTS & ROLLUPS
******************************/

/******************************
BEGIN PAGINATOR
******************************/

/***************
* NAME: pagination
* SCOPE: the search page body content
***************/

.pagination {
    text-align: center;
}

/******************************
END PAGINATOR
******************************/


/******************************
BEGIN MESSAGES & ERRORS
******************************/

/* django automatically validates form elements */
/* this can generate messages, warnings, or errors */
/* these are rendered as list elements within a div */

ul.messagelist {
	padding: 0 0 5px;
	margin:  0;
}

ul.messagelist li {
	font-size:     12px;
	display:       block;
	padding:       4px 5px 4px 25px;
	margin:        0 0 3px 0;
    border-bottom: 1px solid #CCCCCC;
	color:         #666;
	background:    #ffc url(/static/cog/img/icon_success.gif) 5px .3em no-repeat;
}

.warning {
	font-size:   12px !important;
	display:     block;
	padding:     4px;
	margin:      4px;
	text-align:  center;
	color:       red;
	font-weight: bold;
}

ul.errorlist {
	margin:  0 !important;
	padding: 0 !important;
}

.errorlist li {
	font-size:  12px !important;
	display:    block;
	padding:    4px 5px 4px 25px;
	margin:     0 0 3px 0;
	border:     1px solid red;
	color:      white;
	background: red url(/static/cog/img/icon_alert.gif) 5px .3em no-repeat;
}

/* ensure the styles apply to errors even when they are w/in tables */
td ul.errorlist {
	margin:  0 !important;
	padding: 0 !important;
}

td ul.errorlist li {
	margin: 0 !important;
}

.errors {
	background: #ffc;
}

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

/******************************
END MESSAGES & ERRORS
******************************/


/******************************
BEGIN SPECIFIC CSS FIXES FOR THIRD-PARTY ELEMENTS AND SOME IE
******************************/
/*Some of these fixes are for Internet Explorer. If they are new classes, they live here, if they are hacks, they live near the
* element they hack.
* These CSS elements fix bugs in third-party CSS (e.g. YUI, the embedded wiki). If those third party elements are removed, these
* need to be changed. */

/* there is a known ("dropped float") issue w/ IE where the last column contents appears at the bottom of the page */
/* the following styles (x.last) prevents right overflows */
div.last {
  margin-right: -100px;
  position:     relative;
}

/* fine tune some of the spacing in IE */
div.last div#top_nav_right li a {
    padding-left:  3px;
    padding-right: 3px;
    }
div.last div#top_nav {
    padding-top: 2px;
}
div.last ol {
    margin-left: 3px;
}

/* limit the maximum width the user profile image */
.myimage {
    display:   block;
    max-width: 200px;
    border:    1px solid #CCCCCC;
}

/* YUI treeview introduces a bug when user is logged the background of the tree is teal, */
/* this forces it to remain white */
#project_views .yui-content td { background-color: #ffffff !important; }

/******************************
END SPECIFIC CSS FIXES
******************************/

.mybox {
    border:        1px solid #CCCCCC;
	margin-bottom: 5px;
	background:    #FFFFFF;}

.header-gray {
    border-bottom: 1px solid #CCCCCC;
	margin-bottom: 0;
	background:    #EEEEEE;
	text-align:    left;
	color:         #666666;
	font-size:     12px;
}

/***********************************
BEGIN non-CUSTOMIZABLE HEADER STYLES
************************************/

/* TOP NAV */
.top_nav {
    width:       100%;
    height:      22px;
    margin:      0 auto;
    padding:     0;
    background:  #FFFFFF;
    color:       #FFFFFF;
    font-size:   12px;
    font-weight: bold;
    font-style:  normal;
}

/*bar that shows up when there is no upper navigation items (e.g. data cart) */
#top_nav_left {
	padding:          2px 0 0 6px;
	width:            934px;  /* 940 - 6 = 934 */
	background-color: #358C92; /* dark teal */
	float:            left;
    height:           20px;
}

#top_nav_right {
	width:            100%;
    text-align:       right;
    padding:          2px 0 0 0;
    background-color: #FAC24A; /*dark yellow*/
	float:            right;
    height:           20px;  /* don't use inherit here */
}

.top_nav ul {
    margin:      0;
    padding:     0;
    list-style:  none;
    line-height: normal;
}

.top_nav li {
    float:  left;
    height: 20px;
}

.top_nav a {
    display:         block;
    margin-right:    3px;
    text-decoration: none;
    padding:         2px 6px 4px 6px; /* top right bottom left */
    font-weight:     bold;
    color:           #FFFFFF;
    border:          none;
}

.top_nav a:hover {
    text-decoration: underline;
}

#top_nav_right a {
	color:          black;
    padding:        2px 4px 4px 0;

}

#top_subnav_right a {
	display:     inline;
	color:       #358C92;
	font-weight: normal;
	padding:     0;
	margin:      0;
	text-align:  center;
	font-size:   11px;
}

#top_subnav_left {
	padding-top:      2px;
	padding-left:     6px;
	width:            100%;
	background-color: #B9E0E3;
	float:            left;
}

#top_subnav_left a:link, #top_subnav_left a:visited {
    color: #666;
}

#top_subnav {
    width:       100%;
    height:      20px;
    margin:      0 auto;
    padding:     0;
    background:  #FFFFFF;
    color:       #FFFFFF;
    font-size:   12px;
    font-weight: bold;
    font-style:  normal;
}

#top_subnav_right {
	width:        97%;
	padding-top:  2px;
	padding-left: 6px;
	text-align:   right;
	color:        #666;
}

/* Test styles for tabbed rollup */
/* This are currently not used but we may turn on the tabbed rollup again, so keep for now */

.rollover {
    display:        inline;
    border:         solid;
    border-color:   #cdcdcd;
    padding-top:    5px;
    padding-left:   10px;
    padding-right:  10px;
    padding-bottom: 10px;
    color:          #666;
    font-size:      15px;}

.tab_1_selected {
    border-width:  1px 1px 0 1px;
    border-radius: 2px;
}

.tab_1_not {
    border-width: 0 0 1px 0;
}

.tab_not {
    border-width: 0 0 1px 0;
}

.tab_selected {
    border-width: 1px 1px 0 1px;
}

a.nolink{
    color:#666;
}

a.islink{
    color: #358c92;;
}

/* CSS styles for Quality Control Flags */

.input-color {
    position: relative;
}

.input-color .color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
    border: 1px;
    border-style: solid;
    border-color: #666;
    position: relative;
    left: 1px;
    top: 2px;
    right: 1px;
}