@charset "utf-8";

/* 
tan: #b3a98f
header-bar: #92aaaa
teal:  245554
gray-blue: #adc2c2
*/


body, html {
	font: 90%/1.4  Arial, Verdana, Helvetica, sans-serif;
	background:white;
	margin: 0; 
	padding: 0;
	color: #000;
	/* height:100%;   page shows 100% of viewport */
}

ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p, dl {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
}

ul.list  {list-style: none;     }  /* contributors page */
ul.list li  { line-height:20px;              }

/*  datacenter pages  */
p.lrg  { font-size:16px; margin-left:16px; font-weight:bold; margin-bottom:10px; margin-top:25px; background:url(../images/arrow_down-18.png) bottom left no-repeat; }

p.lrg-plain  { font-size:16px; font-weight:bold; margin-bottom:10px; margin-top:25px;     }

p.lrg span  {font-weight:normal; font-size:14px; font-style:italic;    }



dl  { margin-bottom:15px;    }

dt  { font-weight:bold;     }

dd  { margin-bottom:10px;  }

h1, h2, h3  { color:#245554;}

a img { 
	border: none;
}

a:link {
	color:#414958;
	text-decoration: underline; 
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}

p.anchor a { text-decoration:underline; font-weight:bold;}
p.anchor a:hover{text-decoration: none; }

table { margin-left:12px;    }
table td  { vertical-align:top;  }

table th { background:#b3a98f; color:white; font-weight:bold; font-variant:small-caps; font-size:14px;}
tr.alt td { background:#adc2c2;}  /* was #92aaaa  */

tr.over td, tr:hover td  { /* background:#bcd4ec; */ }  /* remove hover bkgrnd from tables  */

table.subset tr:hover td { background:none;     }


/* :::::::::: BEGIN SEARCH BOX :::::::::: */
#search {
	float: right;
	width: 178px; height:35px;
	/*padding: 18px 16px; */
	color: #fff;
	font-size: 0.85em;
	margin-top:-5px; overflow:hidden;
}

#search form  {      }

#search label {
	display: none;
}

#sb {
	color:#666666;
	width: 120px;
	padding: 1px;
}

#searchsubmit {
	padding: 0px 1px;
}

/*#search p {     NOT USED
	margin-bottom: 4px;
	text-transform: uppercase;
	font-weight: bold;
}

#search legend {  NOT USED
	display: block;
	width: 148px;
	text-transform: uppercase;
}
*/

/* :::::::::: END SEARCH BOX :::::::::: */
#container {
	width: 960px;  /* sidebar=180 + content=779 */ 
	min-height:100%; /* matches html, body  */
	position:relative;
	margin: 20px auto 20px auto;
	
}

.content {
	padding: 14px 0px; /* padding t&b removes gap in border-right, more padding tightens it up */
	background: #fff; /*white*/
	width: 739px; /* 780 breaks layout */
	height:100%; 
	margin-top:-2px; /* this lines up border-right with smallnav bar */
	/*min-height:900px; min-height:100% puts big gap before footer, so does deleting height:100% */
	float: left; 
	position:relative; /*margin-bottom:20px;*/ 
	border-right:1px solid #b3a98f;
	border-bottom:2px solid white;
}

.inner-content  { margin:30px 20px; margin-bottom:0; } /*don't need to subtract from .content */


.header {
	height:120px; width:100%; position:relative; background:#b3a98f; 
}

div#shadedbox { width:630px;/*use this to adjust ribbon width across the header*/ height:90px; padding:10px;  margin-top:10px; color:#FF0     }

div#shadedbox h1  {
		margin:0 -20px; margin-top:20px; 
		color:white; font-family:"Arial Black", sans-serif; 
		background-color:#245554; 
		text-align: left;
        position: relative; 		        
		padding: 10px 0; padding-left:20px;
        text-shadow: 0 1px rgba(0,0,0,.8);
        /*background: #5c5c5c;*/
        background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        box-shadow: 0 2px 0 rgba(0,0,0,.3);
    }
.btns-wrap {
	margin-top: 20px;
	border-top: 1px solid #b3a98f;
	padding-top: 20px;
}
.btns-wrap .btn {
	background-color:#245554;
	text-align: CENTER;
	position: relative;
	padding: 10px 0;
	text-shadow: 0 1px rgba(0,0,0,.8);
	/*background: #5c5c5c;*/
	background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
	-moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
	box-shadow: 0 2px 0 rgba(0,0,0,.3);
	display: inline-block;
	margin-right: 10px;
}
.btns-wrap .btn h3 {
	margin-bottom: 0;
}
.btns-wrap .btn h3:after {
	content: ">";
	color: #ffffff;
	text-shadow: 0 1px rgba(0,0,0,.8);
	margin-left: 10px;
	font-weight: bolder;
	text-decoration: none;
}
.btns-wrap .btn a {
	color: #ffffff;
}

div#shadedbox h1:before, h1:after
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-color: transparent;
        bottom: -10px;
    }

div#shadedbox h1:before
    {
        border-width: 0 10px 10px 0;
        border-right-color: #222;
        left: 0;
    }
	
div#shadedbox h1 a
    { text-decoration:none; border:none; color:white;}

/*div#shadedbox h1:after
    {
        border-width: 0 0 10px 10px;
        border-left-color: #222;
        right: 0;
    }
*/

/* not used
.header-text-bkgrnd  { float:left; position:relative; }
background:url(images/CLEA-textbkgrnd-red.png)no-repeat center;*/  

/* not used
.header-text  { float:left; position:relative; width:780px; height:120px; background:url(../images/CLEA-text-red.png)no-repeat center; }*/

.header-bar  { 
	background:#92aaaa; /*clear:both;*/ height:30px; border-top:2px solid white; text-align:right; 
	vertical-align:middle; padding-top:8px; color:#4E5869; position:relative; margin-bottom:2px; 
}

div.smallnav  { /*position:absolute; right:15px;*/ width:320px; margin-left:8px; margin-right:15px; float:right; }   /*was 170px */

span.smallitems {color:#fff; font-weight:bold; font-size:.9em; text-decoration:underline;} 

.sidebar1 {
	float: left; /* keeps it next to content */
	width: 220px;
	background:url(../images/sidebar-grad-teal.png) repeat-y; 
	background-size: 100%; /*this makes sidebar 100% of .container */
	padding-bottom: 20px; padding-top:6px;
	position: relative; /*this keeps it inside its .container */
	height: 100%;  /* this makes the div same height as container, but bkgrnd only goes to bottom of ul content */
	
	}

ul.nav {
	list-style: none; font-size:1.3em; /*background-color:transparent;*/
	border-top: 1px solid black; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 15px; margin-top:40px;
}

ul.nav li {
	border-bottom: 1px solid black; background-color:#245554; /* this creates the button separation */
}

ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 15px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	background-color:transparent;  /* was #8090AB*/
	color: white;
}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background: #92aaaa;  /* was #6F7D94 */
	color: #000; 
}

/*
 *
 * Updated Sidebar Accordion Menu
 * 04/02/18
 *
 */

/* general styles */
#accordion {
	padding-top: 50px;
}
/* header */
#accordion h4 {
	font-size: 1.3em;
	padding: 0 10px;
	font-weight:normal;
	margin-bottom: 0;
}
/* header link */
#accordion h4 a, #accordion h4 {
	cursor: pointer;
	color: #fff;
	text-decoration: none;
}
/* icon */
#accordion h4 span {
	cursor: pointer;
	font-size: 16px;
	float: right;
	background: url(../images/sidebar-menu-icon.png) 0px -13px no-repeat;
	display: block;
	width: 25px;
	height: 14px;
	margin: 10px 0;
	/* add transform to rotate arrow correct way. */
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
#accordion h4 span.active {
	/* rotate arrow down when active. */
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}
/* list items */
#accordion li {
	line-height: 2.6em;
	border-bottom: 1px solid  #000;
	background-color: #245554;
	list-style-type: none;
}
#accordion ul.submenu li:last-child {
	border-bottom: none;
}
/* links */
#accordion ul ul li a {
	color: #fff;
	text-decoration: none;
	font-size: 1.3em;
	display: block;
	padding: 0 15px;
	transition: all 0.15s;
}
/* link hover  */
#accordion ul ul li a:hover {
	border-left: 5px solid #245554;
}


/* submenus */
#accordion ul ul.submenu {
	display: none;
	border-top: 1px solid #000;
	width: 100%;
}
#accordion ul ul.submenu.active {
	display: block;
}
#accordion ul ul.submenu li {
	background: #92aaaa;
}
#accordion ul ul.submenu li a {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently*/
}
/* show default active if desired */
#accordion li.active ul {
	display: block;
}
/* Updated Sidebar Accordion Menu End */

.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}

#form  {background-color:#dbdbdb; width:550px; margin-left:20px;}

form.emailform  { margin-left:20px;       }

form.subsetform  {    }

table.subset  {   }

input { margin-top:4px; }

input:focus  { background-color:#e5e3dc; border:1px solid #d5d0c1; }

span.star  {font-size: large; font-weight:bold; color:#900; } 


.rotator  { height:351px; width:351px; margin:auto; text-align:center; position:relative; float:left;}

.rotator img  { padding:15px; border:1px solid #ccc; background-color:#eee; float:left; margin-left:20px; margin-top:8px; }



/* parent box, not used  */
#boxes  { width:100%; text-align:center; float:left; margin-top:25px;}
/*background:url(../images/dkgreen-gradient.png) repeat-x; position:relative;*/

.twitter  {  float:right; margin-top:10px;           }

/*child boxes (news/tally box on homepage) */
.box  { width:230px; height:250px; color:black; float:right;  
/*background:url(../images/box-bkgrnd.png); overflow:hidden;*/ 
display:inline-block; vertical-align:middle; text-align:left; 
margin:40px 0px 20px 0px; border: 2px solid #245554;
position:relative;  
}

/*.box .box-bkgrnd  { background-color:#fff; width: auto; position:relative; margin-top:-15px; padding-bottom:15px;} 

.boxes ul  { margin-left:10px; padding-top:16px;   }

.boxes ul li  { color:#000; position:relative;
list-style:none;
background: url(../images/green-bullet.png) no-repeat;
padding-left:25px;
margin-bottom:10px;
  }
  
.boxes ul li a  { color:#000; }
.boxes ul li a:hover  {text-decoration: underline; color: #42413C; } 
*/


/*   INFO BOXES     */
.tanbox  { 
	background:url(../images/tan-boxbot.png) no-repeat bottom; 
	margin-bottom:20px; margin-left:20px; 
	width:265px;  /* same as boxtop */  }
	
.tanbox2 { 
	background:url(../images/tan-boxbot-360.png) no-repeat bottom; 
	margin-bottom:20px; margin-left:20px; 
	width:360px;  /* same as boxtop */  }
.tanbox2 table.list2  { width:360px; margin-top:-30px; margin-bottom:20px; font-size:1.2em; }		
.tanbox2 table.list2 span  {font-size:13px; font-style:italic; }
.tanbox2 h3  {background:url(../images/tan-boxtop-360.png) no-repeat; 
	height:50px; /* increasing height makes the infolist top-margin deeper & 
	doesn't change the height of the h3, img is 39px high  */
	color: white; 
	padding-top:6px; padding-left:10px;                 }

.tanbox2f { 
	background:url(../images/tan-boxbot-325.png) no-repeat bottom; 
	margin-bottom:20px; margin-left:20px; 
	width:325px;  /* same as boxtop */  }
.tanbox2f table.list2  { width:325px; margin-top:-30px; margin-bottom:20px; font-size:1.2em; }		
.tanbox2f table.list2 span  {font-size:13px; font-style:italic; }
.tanbox2f h3  {background:url(../images/tan-boxtop-325.png) no-repeat; 
	height:50px; /* increasing height makes the infolist top-margin deeper & 
	doesn't change the height of the h3, img is 39px high  */
	color: white; 
	padding-top:6px; padding-left:10px;                 }

.tanbox3 { 
	background:url(../images/tan-boxbot-680.png) no-repeat bottom; 
	margin-bottom:20px; margin-left:20px; 
	width:680px;  /* same as boxtop */  }		
.tanbox h3  {background:url(../images/tan-boxtop.png) no-repeat; 
	height:50px; /* increasing height makes the infolist top-margin deeper & 
	doesn't change the height of the h3, img is 39px high  */
	color: white; 
	padding-top:6px; padding-left:10px;                 }
.tanbox3 h3  {background:url(../images/tan-boxtop-680.png) no-repeat; 
	height:42px; /* increasing height makes the infolist top-margin deeper &
	doesn't change the height of the h3, img is 39px high  */
	color: white; 
	padding-top:6px; padding-left:10px;                 }	
.tanbox3 table.list  { width:670px; margin-top:-30px; margin-bottom:20px; font-size:1.2em; }
.tanbox3 table.list span  {font-size:13px; font-style:italic; }
/* .tanbox ul.infolist a, .tanbox ul.infolist a:visited {        } */
/* .tanbox ul.infolist a:hover, .tanbox ul.infolist a:active, .tanbox u.infolistl a:focus {         } */

	
.tanbox p, .tanbox2 p, .tanbox2f p  {padding:10px; padding-top:0; padding-bottom:10px; margin-top:-30px; font-size:1.1em;   }
	
.tanbox ul.infolist, .tanbox2 ul.infolist, .tanbox2f ul.infolist  { padding:10px; padding-top:0; padding-bottom:10px; margin-top:-30px; 
	list-style: none; list-style-image: url("../images/arrow_down-18.png"); 
	font-size:1.2em; line-height:30px;  }
		
.tanbox ul.infolist li, .tanbox2 ul.infolist li, .tanbox2f ul.infolist li  { margin-left:30px; }


.tanbutton { height:40px; width:175px; background:url(../images/tan-button-split.jpg) no-repeat; margin-left:10px; padding-left:10px; padding-top:4px; margin-bottom:15px; margin-top:30px;}

.tanbutton2 { height:40px; width:210px; background:url(../images/tan-button-wider.jpg) no-repeat; margin-right:0; margin-left:0; padding-left:0; padding-top:4px; margin-bottom:15px; margin-top:30px;}

.tanbutton p a, .tanbutton2 p a {color:#FFF; font-size:1.2em; font-weight:bold; text-align:center; text-decoration:none;   }
.tanbutton p a:hover, .tanbutton2 p a:hover { color:#555; }

.grbutton  {height:40px; width:175px; background:url(../images/grbutton-split.jpg) no-repeat; margin-left:10px; padding-left:10px; padding-top:4px; margin-bottom:15px; margin-top:30px;}

.grbutton2  {height:40px; width:210px; background:url(../images/grbutton-wider.jpg) no-repeat; margin-right:0; margin-left:0; padding-left:0; padding-top:4px; margin-bottom:15px; margin-top:30px;}

.grbutton p a, .grbutton2 p a {color:#FFF; font-size:1.2em; font-weight:bold; text-align:center; text-decoration:none;   }
.grbutton p a:hover, .grbutton2 p a:hover { color:#555; }


/*  For Biblio page  */
table.toc  { width: 600px;}
div.goto  { text-align:center; margin-bottom:10px; }


.footer {
	height: 50px;
	padding: 10px 0; margin-top:-10px; 
	background: #245554; color:white; font-weight:bold;
	text-align:center; 
	vertical-align:middle; 
	width:100%; margin:auto; /*these 2 make it fit nicely outside the container */
	position: relative;
	clear: both; 
}

.footer p { font-size:80%;}

.footer a  { color:white; text-decoration:none;     }

.footer a:hover { text-decoration:underline; color:white;     }

.footer-left  { width:40%; float:left; margin-left:20px;              }
.footer-left a  {color:white; text-decoration:none;            }
.footer-left a:hover  { text-decoration:underline; color:white;               }
           


/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0;
}

fltlfter
{ /* this class can be used to float an element left. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 40px;

/***  UROP PROFILES STYLES   ***/
h2.urop {background: url('../images/verticalbar-tan.png') no-repeat top left;  
width:200px; height:25px; padding-left:30px; overflow:hidden; margin-left:3px;}
.uropbio-top  { width:100%;}
.textwrap  { float:left; margin-left:15px; margin-right:20px; vertical-align:middle; }
.textwrap1  { float:left; margin-left:15px; margin-right:20px; /*vertical-align:middle;*/ }
.uropbio-body { width:100%; margin-top:25px;}
.pullquote  { float:right; width:190px; margin-left:20px; color:#245554; font-weight:bold; margin-top:20px; padding-top:8px; padding-bottom:8px; background-color:#d7d2c4; font-style:italic;}
.pull-mid  {margin-top:-1em;}
.pull-last  {margin-top:-1.9em;}
dl.uropqa  { margin-top:20px; margin-bottom:50px;}
dt { color:#7b725a; font-weight:bold; font-size:14px;  width:500px; padding:5px;  }
dt.alt  { background-color:#92aaaa; color:#fff; width:470px; padding:5px; }
dd{ margin-bottom:15px;}
.sup, .sub {
   vertical-align: text-bottom;
   position: relative; top:.3em;
   color:#fff; font-size:20px;
}
.sub {color:#fff; font-size:20px; top:.3em;}
/*hr.dash { height:0; background-color:transparent; color:#b3a98f ; border-bottom:1px dashed #b3a98f; border-top:none; } */

/* Data and Documentation Styles */
.items-wrap {
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
}
.item {
	float: left;
	width:48%;
	border: 1px solid rgba(0,0,0,0.1);
	margin-right: 1%;
	margin-bottom: 1%;
	min-height: 205px;
	background: #f5f5f5;
}
.item:nth-child(2n) {
	margin-right: 0;
}
.item-inner {
	padding: 15px;
}
.item .item-inner h3, .item .item-inner a, .item .item-inner p {
	padding: 0;
}
.item .item-inner h3 a {
	text-decoration: none;
}
.item .item-inner img {
	width: 100%;
	max-width: 100%;
	margin-bottom: 10px;
}