/** JBEI master CSS
 * by Kryshna Avina - KAvina@lbl.gov
 *  We use YUI to reset all elements to a common base.
 *  Then build up the JBEI style in this file.
 */

/** style and size common elements
 */
h1, h2, h3, h4, h5 {
    /* old value	color: #6F5E4A; */
    color: #745F46;
}

h1, h2 {
    font-size: 180%;
    padding-bottom: 0.5em;
    font-family: "Times New Roman";
}

h2 {
    font-size: 130%;
    margin-bottom: 1em;
	margin-top: 2em;
}

h3 {
    color: #000000;
    font-weight: bold;
    font-size: 115%;
	margin-top: 2em;
	margin-bottom: 1em;
}

strong {
    color: #A52218;
}

a {
    color: #0071BC;
    text-decoration: none;
}

a:hover, #hd a:hover {
    text-decoration: underline;
    color: #A52218;
}
/* inheritance is the proper way to do this, but alas, IE is broken */
h1 a, h2 a {
    color: #745F46;
}
/* h2 a {
 color: #D5CBBF;
 }*/

ul, ol {
    margin-left: 1em;
}

ul li {
    list-style-type: disc;
}

ol li {
    list-style-type: decimal;
}

ol li, ul li {
    margin-left: 0.5em;
    list-style-position: outside;
    /*text-indent: 1em; */
}

p {
	margin-bottom: 0.5em;
	line-height: 170%;
	margin-left: 0px;
}


/** common classes
 */

/* HORIZONTAL MENUS */

ul.horizmenu, ul.vertmenu {
    margin: 0;
}

ul.horizmenu li {
    border: 0px;
    padding: 0px;
    margin: 0;
    padding-top: 5px;
    display: inline;
    list-style: none;
    text-align: center;
}

.horizmenu li.last {
    padding-right: 0em;
    margin-right: 0em;
}

.horizmenu li.first {
    padding-left: 0em;
    margin-left: 0em;
}
/* END HORIZONTAL MENUS */


/* VERTICAL MENUS */
ul.vertmenu li {
	border: 0px none;
	padding: 0;
	margin: 0;
	text-align: left; list-style-type:none
}
/* END VERTICAL MENUS */


ul.no-bullets li {
	list-style: none;
}
}
.yah {
    background-color: #91A3C9;
}

/* HEADINGS WITH COLORED SQUARES */
.bluebox, .redbox, .yellowbox, greenbox{
	background: url('/images/redbox.jpg') no-repeat center left;
	padding-left: 24px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-left: 0px;
}

.bluebox {
	background: url('/images/bluebox.jpg') no-repeat center left;
	padding-left: 24px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-left: 0px;
}

.yellowbox {
	background: url('/images/yellowbox.jpg') no-repeat center left;
	padding-left: 24px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-left: 0px;}

.greenbox {
	background: url('/images/greenbox.jpg') no-repeat center left;
	padding-left: 24px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-left: 0px;}
/* END COLORED SQUARES */

/* GRAY BORDER AROUND ELEMENT 
	use this to get a consistent style for gray-border elements 
	*/
.gray-border {
    border: 1px solid #D5CBBF;
}


/* A "more" Arrow appended to the end of the link */
.more-arrow {
    background: url('/images/more-arrow.jpg') no-repeat center right;
    padding-right: 20px;
    min-height: 15px;
    display: inline;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    line-height: 2em
}


/* FLOATS 
	make text wrap around images */

/** wrap floats in a div with class="group" when stacking multiple floats */
.left-float {
    margin: 0em 1em 1em 0em;
    float: left;
}

.right-float {
    margin: 0em 0em 1em 1em;
    float: right;
}

.group {
    overflow: auto;
}

.group img.left-float, .group img.right-float {
	margin-top: 0.5em;
}

.group h2 { margin-top: 0;}

/* END FLOATS */

/* This is used for "go back to..." navigational elements -- initially included on top of divisional sidebars and 
   the leadership pages */
.homelink {
    text-transform: uppercase;
    font-size: 90%;
    color: #808080;
    margin-top: -2em;
    margin-bottom: 2em;
}
/* END HOMELINK */


.gray-box {
    background-color: #efece7;
    padding: 1em 1em;
    width: 220px;
}

.gray-box h3 {
	margin-top: 0;
	margin-bottom: 0;
}

.imgreplace {
    position: relative;
	font:0/0 Arial;
	line-height: 0px;
    margin: 0px; padding: 0px; /* hide overflow:hidden from IE5/Mac */ 
    /* \*/
    overflow: hidden; 
    /* */
}

.imgreplace span {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    font:0/0 Arial;
    z-index: 1; /*for Opera 5 and 6*/
}

.imgreplace a {
    cursor: pointer;
}
/** style specific elements
 */
#hd {
    font-family: Arial, "Times New Roman";
    color: #4D4D4D;
    background: url('/images/bar.jpg') no-repeat top left;
    padding-left:45px; padding-right:0px; padding-top:43px; padding-bottom:63px
}

#hd a {
    color: #4D4D4D;
}

#headermenu {
    float: right;
    right: 0;
    text-align: right;
    margin-top: 35px;
}

#headermenu .horizmenu {
    width: 527px;
    background: url('/images/bar.jpg') no-repeat top left;
    padding-top: 15px;
    margin-top: 3px;
    text-align: left
}

#headermenu .horizmenu li {
    padding-right: 15%;
}

#headermenu .horizmenu li.last {
    padding-right: 0;
}

#headermenu .horizmenu li.first {
    padding-left: 15px;
}

#bd {
    padding-left: 65px;
}

/** LEFT MENU
 * This is the main menu on the left of the page that
 * lists the research areas, etc
 */
.lefttmenu img {
    display: block;
}

.leftmenu a {
    line-height: 0px;
}

.leftmenu div {
    margin-bottom: 6px;
}

/** END LEFT MENU **/




/** this is just for the front page
 * where we need to adjust the right frame up a bit to deal with
 * whitespace in the flash
 */
.flashadjust {
	margin-top: 0px;
	margin-left: 0 px;
	text-align: right;
}

/** TOP MENU
 * this is the navigational menu which is not part of 
 * the main header. Tabs in division pages belong to this class.
 * 
 * The padding between the li elements is too wide when there are a lot
 * of menu items, or they are long, such as in the about section.
 * 
 * If you want less padding, add an "aboutmenu" class to your 
 * topmenu div.
 */
#topmenu {
    border-bottom: 1px solid #745F46;
    margin-bottom: 20px;
    padding-bottom: 4px;
}

#topmenu .horizmenu li {
    padding-left: 5%;
    padding-right: 5%;
    text-align: center;
}

#topmenu .horizmenu li.first {
    padding-left: 0;
    text-align: left;
}

#topmenu .horizmenu li.last {
    padding-right: 0;
    text-align: right;
}

#topmenu .horizmenu a {
    color: #808080;
}

#topmenu .horizmenu.aboutmenu li {
    padding-left: 1.6%;
    padding-right: 1.6%;
}

#topmenu .horizmenu.aboutmenu li.first {
    padding-left: 0;
}

#topmenu .horizmenu.aboutmenu li.last {
    padding-right: 0;
}

#topmenu .horizmenu li a:hover, #topmenu .horizmenu li a.menuon {
    border-bottom: 6px solid #745F46;
    color: #A52218;
    margin-bottom: 6px;
    padding-bottom: 4px;
    text-decoration: none;
}

/** END TOP MENU **/

/** EMPLOYEE INFO MENU 
 * this sets up the left navigation for the employee info section
 * note that we set up the specific UL style in the more general 
 * vert-menu class -- this is just the colors, backgrounds, etc
 * specific to this particular menu
 */


#empl-menu {
	background-color: #F1F0D1;
	padding-bottom: 1em;
}

#empl-menu li {
	padding: 0.25em 20px 0.25em 20px;
	color: #000000;
}

#empl-menu li a {
	color: #000000;
}

#empl-menu li a:hover, #empl-menu li.emplon a {
	text-decoration: none;
	color: #A52218;
}

#empl-menu li:hover, #empl-menu li.emplon {
	background: url('/images/redbox.jpg') no-repeat left center;
	color:#A52218; background-position-y:center
}


/* END EMPLOYEE INFO MENU **/

/** FRONT PAGE QUOTE
 * this is formatting for the Keasling quote on the front page
 */
#fp-quote {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 210%;
	border-left: 1px solid #745F46;
	color: #000000;
	margin-left: 15px;
	left: auto;
}

#fp-quote blockquote {
    padding-left: 20px;
    padding-top: 3.5em;
    font-style: italic;
    font-size: 110%;
}

#fp-quote .quote-author {
    font-size: 130%;
    font-weight: bold;
    margin-top: 1em;
    text-align: left;
}
/** END FRONT PAGE QUOTE **/


#ft {
    margin-top: 35px;
    height: 85px;
    margin-bottom: 20px;
}

#mainbody {
    padding-right: 60px;
}

.yui-gd {
    padding-right: 0;
}

.yui-gd .yui-u {
    width: 585px;
    margin-left: 6.7%;
}

.yui-gd div.first {
    width: 186px;
}

.yui-gd {
    padding-bottom: 38px;
}

#cse-search-results {
    width: 540px;
    overflow: auto;
}

.person {
    margin-top: 1em;
    font-size: 90%;
}

.person h2 {
    text-transform: capitalize;
    font-size: 150%;
    margin-top: 1.5em;
	margin-bottom: 0.2em;
}
/* for person listings, we do want the colors of links to change
 * so we are undoing the link color we set globally in H elements
 */
.person h2 a, .person h1 a {
    color: #0071BC;
}

.person h3 {
    font-size: 130%;
    margin: 0px 0px 0.5em;
}

.mainbodyimg {
    padding-top: 2em;
}
/* menu on left done with the YAIRM technique
 * the _on ids are for auto-highlighting
 */
#technologies span, #technologies_on span, #technologies_on, #technologies, 
#feedstocks span, #feedstocks_on span, #feedstocks_on, #feedstocks, 
#deconstruction span, #deconstruction_on span, #deconstruction_on, #deconstruction, 
#fuels-synthesis span, #fuels-synthesis_on span, #fuels-synthesis_on, #fuels-synthesis, 
#management span, #management_on span, #management_on, #management, 
#location span, #location_on span, #location_on, #location, 
#industry span, #industry_on span, #industry_on, #industry {
    background-image: url('/images/feedstocks.jpg');
    background-repeat: no-repeat;
    height: 51px;
    width: 185px
}

#feedstocks_on span, #feedstocks span:hover, #feedstocks_on {
    background-image: url('/images/feedstocks-on.jpg');
}

#technologies, #technologies span {
    background-image: url('/images/technologies.jpg');
}

#technologies_on, #technologies_on span, #technologies span:hover {
    background-image: url('/images/technologies-on.jpg');
}

#deconstruction, #deconstruction span {
    background-image: url('/images/deconstruction.jpg');
}

#deconstruction_on, #deconstruction_on span, #deconstruction span:hover {
    background-image: url('/images/deconstruction-on.jpg');
}

#fuels-synthesis, #fuels-synthesis span {
    background-image: url('/images/fuels-synthesis.jpg');
}

#fuels-synthesis_on, #fuels-synthesis_on span, #fuels-synthesis span:hover {
    background-image: url('/images/fuels-synthesis-on.jpg');
}

#management, #management span {
    background-image: url('/images/management.jpg');
}

#management_on, #management_on span, #management span:hover {
    background-image: url('/images/management-on.jpg');
}

#location, #location span {
    background-image: url('/images/location.jpg');
}

#location_on, #location_on span, #location span:hover {
    background-image: url('/images/location-on.jpg');
}

#industry, #industry span {
    background-image: url('/images/industry.jpg');
}

#industry_on, #industry_on span, #industry span:hover {
    background-image: url('/images/industry-on.jpg');
}
#custom-doc {
    width: 69.23em;

/** width:
    67.56em;
*/
min-width:
    900px;

margin:auto;

text-align:left;
}