/* Common to both layouts */
body {
	background: #634f80 url(./css_images/qgradient.png) repeat-x 0 0;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
}

h1 {
	font-weight: bold;
}

h2 {
	font-weight: bold;
	margin: 2em 0 0 0;
}

h3 {	
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	margin: 8px 0 0 0;
}

p {
	line-height: 1.6;
	margin: 8px 0;
}
em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

#content {
	position: relative;
	margin: 120px auto 100px auto;
	width: 960px;
	background: #FFF;
	overflow: visible;
	border: 1px solid #c2c2c2;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
}

#content h1, #content h2, #content h3 {
	color: #332f71
}

/* **********************
HEADER
********************** */
img.image1 {
	display: inline;
	margin: 20px 10px;
}

img.image2 {
	display: inline;
	margin-bottom: 30px;
	margin-left: 5px;
}

img.image2a {
	display: inline;
	margin-bottom: 2em;
}

#content div#header{
	width: 100%;
	height: 130px;
	margin-top: -120px;
}

#siteLogo {
	z-index: 100;
	position: absolute;
	left: 848px;
	top: 132px;
}


/*  *******************
Navigation
****************** */

#leftcol {
	display: inline;
	float: left;
	width: 180px;
	margin: 9px 0 0 10px;

	font-family: Helvetica, Arial, sans-serif;
}

#leftcol ul {
	width: 170px;
	background: #c7c7c7;
	border-left: 1px solid #c7c7c7;
	border-right: 1px solid #c7c7c7;
	border-bottom: 1px solid #c7c7c7;
}

#leftcol ul li {
	margin-top: 1px;
}

#leftcol a {
	display: block;
	text-decoration: none;
	width: 150px;
	font-weight: bold
}


#leftcol ul li a {
	background: #f4f4f4;
	color: #464141;
	padding: 6px 10px;
	border-top: 1px solid #ebebeb;
	border-bottom: 1px solid #ebebeb
}

#leftcol li.noaccordion a {
text-decoration: none;
border-bottom: 0;
}

#content #leftcol li.noaccordion:first-child a {
	background: #d6be54 url(./css_images/h1gradient.gif) 0 0;
	color: #000;
	font-size: 14px;
	text-decoration: none;
	-webkit-text-shadow: #666 2px 2px 2px
}

#content #leftcol li.noaccordion:first-child a:hover {
	background-position: 0 -33px;
}

#leftcol li.active a, #leftcol li.active a:hover {
	font-weight: bold;
	background: white url(css_images/arrow_right.gif) no-repeat right center;
}	

/* way to cram a third level into the accordion */
#leftcol li.active ul li a {
	background: #f4f4f4;
	font-size: 80%;
	padding-left: 50px;
	width: 115px
}

#leftcol li.haschild span.active a, #leftcol li.haschild li.active a {
	background: white url(css_images/arrow_right.gif) no-repeat right center;
	font-size: 8px;
	padding-left: 50px;
	width: 115px;
}

#leftcol li.active span a:hover, #leftcol li.active li a:hover {
background: white;
}

#leftcol li.openMe a[href="#"]{
	font-weight: bold;
	color: #d6be54
}

#leftcol li a:hover {
	background: white
}

#leftcol ul li ul {
	border: 0
}

#leftcol ul li ul li a {
	background: #f4f4f4;
	color: #464141;
	padding-left: 25px;
	margin-right: 0;
	padding-right: 5px;
	width: 140px;
	border: 0
}

#leftcol ul li ul li a:hover {
	background: white;
}

#logo {
	position: relative;
	left: 10px;
	padding-bottom: 20px
}

body acronym, abbr {
	border-bottom: 1px dotted #d6be54;
}

/* *****************
FOOTER
***************** */

#foot {
	clear: both;
	height: 110px;
	background: url(./css_images/gradient05.png) 0 0;
	z-index: 100;
	overflow: hidden;
}
#foot img {
	margin: 30px 20px 0px 10px;
}

#foot ul {
	position: relative;
	top: -24px;
	display: block;
	width: 760px;
	height: 60px;
	margin-left: 190px;
	font-size: 10px
}

#foot ul  li {
	display: inline;
	margin: 4px;
}

#foot ul  li:first-child {
	margin-left: 0;
}

#foot a {
	color: black
} 
#foot a:hover {
	text-decoration: underline;
	color: black
} 

/* ******************* 
3 column, main column 
******************* */
#maincol {
	display: inline;
	float: left;
	width: 520px;
	padding: 10px;
	margin-left: 180px;
	background: #FFF
}

#maincol dl, #maincol ul, #maincol ol {
	line-height: 1.6;
	margin: 8px 0;
}

#maincol dl dt {
	font-weight: bold;
}

#maincol h1 {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.6
}

#maincol a:link {
	text-decoration: underline;
	color: #332f71;
}

#maincol a:visited {
	text-decoration: none
}
#maincol a:hover {
	color: #fca311;
}

/*  ************************
3 column layout, right column 
************************* */

#rightcol {
	font-size: 11px;
	float: left;
	width: 210px;
	margin: 0;
	height: 100%;
	padding: 0 10px;
	background: #f2f2f2;
}

#rightcol h2 , #rightcol h2 a {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	margin-top: 1em;
	text-decoration: none;
	color: #332f71;
	line-height: 1.6
}

#rightcol h3 {
	color: #332f71;
	font-weight: bold;
	margin-top: 2em;
	margin-bottom: -7px;
	line-height: 1.6
}
#rightcol h2 + h3 {
	margin-top: 10px;
}
	
#rightcol h3 a {
	text-decoration: none;
	color: #332f71;
}

#rightcol a {
	text-decoration: underline;
	color: #d04105;
}

#rightcol img {
	float: left;
	margin: 2px 1em 0 0;
	border: 1px solid #666
}
#rightcol p.more a {
	text-decoration: none;
	background: url(./css_images/more.gif) no-repeat 0 2px;
	padding-left: 11px;
	color: #332f71
}

#rightcol p.more a:hover {
	text-decoration: underline;
}


div.rightblock {
	border-top: 1px solid #f9f9f9;
	border-bottom: 1px solid #ebebeb;
	padding-bottom: 0.25em
}

#content #bigImage {
	float: left;
	clear: right;
	margin: 10px auto
}

* .skiplink {position: absolute; left: -1000px} /* for screen readers */

/* *************************
 2 column, main (right) column 
 ************************ */

body h1#pagetitle {
	font-size: 14px;
	background: #d6be54 url(./css_images/h1gradient.gif) 0 0;
	padding: 7px 10px;
	float: left;
	margin-top: 10px;
	width: 680px;
	color: #000;
}

#twocol {
	position: relative;
	display: inline;
	float: left;
	width: 690px;
	padding: 10px 60px 10px 10px;
	background: #FFF
}
#twocol h2 {
	font-size: 14px;
	margin-top: 2em
}

#twocol h2:first-child, #twocol ul:first-child, #twocol dl:first-child, #twocol p:first-child { 
	margin-top: 23px;
}

#twocol ul#calendar:first-child {
	margin-top: 0
}

#twocol ul, #twocol ol, #twocol dl, #twocol table {
	line-height: 1.6;
	margin: 8px 0;
}

#twocol ol, #twocol ul li ol {
	list-style: decimal;
}
#twocol ol ol {
	list-style: lower-roman;
}

#twocol ol li {
	margin-left: 20px
}

#twocol ul li {	
	line-height: 1.6;
}

#twocol li ul, #twocol li ol, #twocol li dl {
	line-height: 1.6;
	margin-top: 0;
	margin-bottom: 0;
}

#twocol dl.faq dt{
	font-weight: bold;
	margin: 26px 0 0 0;
	color: #332f71;
}

/* links */
#twocol a:link {
	text-decoration: underline;
	color: #332f71;
}

#twocol a:visited {
	text-decoration: none
}
#twocol a:hover {
	color: #fca311;
}

/* bibliographies and similar */
#twocol ul.bibliography li {
	margin: 8px 0;
}

#twocol ul.abstract {
	margin-top: -0.8em;
}

#twocol ul.abstract li a, #twocol a#toggle {
	font-size: 10px;
	text-transform: uppercase;
	font-weight: bold;
	display: block;
	width: 15%;
	padding-left: 10px;
	background: url(./css_images/purplearrow.jpg) no-repeat 0 5px;
	text-decoration: none
}

#twocol ul.abstract li a:hover, #twocol ul.abstract li a.active, #twocol a#toggle:hover, #twocol a#toggle.active {
	display: block;
	font-weight: bold;
	width: 15%;
	color: #FFF;
	padding-left: 10px;
	background: #332f71 url(./css_images/whitearrow.png) no-repeat right 5px;
}

#twocol ul.abstract p {
	background: #f4f4f4;
	padding: 10px;
	margin: 0 0 2em 0;
	text-align: justify
}

/* recruiting studies */

#twocol ul.studyMetaData li{
	margin: 0;
}

#twocol ul.studyMetaData li h3{
	display: inline;
	font-size: 11px;
	font-variant: normal
}
/* IE6 won't let me do this
#twocol ul.studyMetaData li h3:after {
	content: ":"
}
*/ 

/*  ******************
misc 
****************** */
/* add an arrow to external links */
#twocol a[rel="external"] {
	padding-right: 15px;
	background: url(./css_images/external.gif) no-repeat right center;
}

/* add an icon to PDF links */
#twocol a[title~="PDF"] {
	padding-right: 15px;
	padding-left: 0;
	background: url(./css_images/acrobat.png) no-repeat right center;
}

/* biography/profile pages */
#twocol dl.bioStyleOne {
	margin-bottom: 38px;
	overflow: hidden
}

#twocol dl.bioStyleOne dt {
	float: left;
	font-weight: bold;
	width: 460px;
}


#twocol dl.bioStyleOne dd.bioStyleOneEmail  {
	float: right;
	width: 190px;
	position: relative;
	display: block;
}
#twocol dl.bioStyleOne dd img {
	float: left;
	margin: 5px 20px 0px 0;
	border: 1px solid #666
}

/*
#twocol dl.bioStyleOne dd:last-child{
clear: left
}
*/
#twocol dl.bioStyleOne li {
	font-style: italic
}

#twocol dl.bioStyleTwo {
	display: inline-block;
	margin-bottom: 38px;
	margin-top: 8px;
}

#twocol dl.bioStyleTwo dt {
	float: left;
	font-weight: bold;
	width: 230px;
}

#twocol dl.bioStyleTwo dt + dd {
	float: left;
	width: 270px;
}

#twocol dl.bioStyleTwo dd.bioStyleTwoEmail  {
	float: right;
	width: 190px;
	position: relative;
	display: block;
}

#twocol dl.bioStyleTwo dd.bioStyleTwoEmail + dd {
	clear:both;
	width: 690px;
}

#twocol dl.bioStyleTwo dd img {
	float: left;
	margin: 5px 20px 0 0;
	border: 1px solid #666;
}

/* floating and clearing */
.floatLeft, body div.floatLeft {
	display: block;
	float: left;
	margin: 1em 1em 1em 0;
	padding: 5px;
	border: 1px solid #ccc;
	
}
.floatRight, body div.floatRight {
	display: block;
	float: right;
	margin: 1em 0 20px 5px;
	padding: 5px;
	border: 1px solid #ccc;
}

.clear-right {
	clear: right !important
}

.clear-left {
	clear: left !important
}

.clear-both {
	clear: both !important
}
/* floated images */
div.imgblock {
	width: 280px;
	height: auto;
	position: relative;
	display: block;
	margin: 0 auto 2em 0;
}

div.wideimgblock {
	width: 330px;
	height: auto;
	position: relative;
	display: block;
	margin: 0 0 2em 0;
}

/* basic "click to enlarge" overlay  text */
a span.tip {
	display: none;
	height: 14px;
	width: 33%;
	margin: auto;
	position: absolute;
	left: 33%;
	right: 33%;
	top: 33%;
	bottom: 33%;
	text-align: center;
	color: white;
	font-weight: bold;
	background-color: black;
	padding: 3px;
	font-size: 10px
}
	a.sidebar span.tip {
		width: 50%;
		left: 25%;
		right: 25%;
	}
	
a:hover span.tip {	
	display: block;
}

#twocol div.imgblock a, #twocol div.wideimgblock a { font-size: 10px; text-decoration: none;}

#twocol p.contact {font-weight: bold; color: #666; margin-bottom: 0}
#twocol ul.contact li > h3 {margin-top: 2em }
#twocol ul.contact, #twocol ul.contact2, #twocol ul.contact li, #twocol ul.contact2 li {margin: 0}

#twocol ul.contact2 h3 {margin: 2em 0 0 0; font-size: 11px; font-weight: normal}
#twocol ul.contact2 li:first-child  h3{margin: 1em 0 0 0}

div#leftcol .sidebar {
	width: 150px;
	background-color: #eee;
	line-height: 1.2;
	text-decoration: none;
	font-weight: normal;
	font-size: 10px; 
	color: #332f71;
	padding: 10px;
}

/* content below left nav */
div#leftcol span.sidebar {
	display: block;
	margin-top: 2em;
	border: 1px solid #ccc;
	padding-bottom: 0;
	border-bottom: 0;
	font-weight: bold;
}

div#leftcol a.sidebar {
	position: relative;
	border: 1px solid #ccc;
	border-top: 0
}
div#leftcol a.sidebar img { border: 1px solid #ccc }


/* page specific nav stuff */

body#aboutOI li#navaboutOI a, body#clinic li#navclinic a, body#staff li#navstaff a, body#stories li#navstories a, body#research li#navresearch a, body#registry li#navregistry a, body#news li#navnews a, body#archive li#navarchive a, body#directions li#navdirections a, body#contact li#navcontact a {
	font-weight: bold;
	color: #000;
	background: white url(css_images/arrow_right.gif) no-repeat right center;
}

/* misc */

#twocol ul.bullets {
	padding-left: 11px;
	list-style-type: disc;
}

p.irbStamp { font-size: 9px }
p.irbStamp img { display: block; margin: .5em 0}

#twocol h2.calendar {
	font-size: 16px;
	padding: 0 10px;
	background: #d6be54 url(./css_images/h1gradient.png) 0 0;
	color: #fff;
	width: 192px;
	margin-bottom: 10px;
	cursor: pointer
}


dl.calendar {
	width: 210px;
	background-color: #eee;
	border: 1px solid #727373;
}

dl.calendar dt {
	font-family: "Times New Roman";
	text-transform: uppercase;
	font-size: 14px;
	font-weight: normal;
	color: #eee;
	padding: 2px 10px;
	background-color: #727373;
}

dl.faq dt { font-weight: bold; margin-top: 1em }
dl.faq dd { position: relative; left: -1.2em; margin: .5em 0; padding-left: 1.2em; background: url(./css_images/bullet.png) no-repeat left 4px}

#twocol dl.calendar dd a, #twocol dl.calendar dd strong {
	display: block;
	font-weight: bold;
	padding: 3px 10px;
	text-decoration: none;
	}
#twocol dl.calendar dd a:hover {
	background-color: white;
	color: black
}

ul#calendar li  {
        width: 210px;
        display: inline-block;
        vertical-align: top;
        margin: 0 20px 10px 0;
}
ul#calendar li.margin0 {
	margin-right: 0
}

#twocol table.threeCol {
	border: 1px solid #727373;
}

#twocol table.threeCol th {
	font-weight: bold;
	border-bottom: 1px solid #727373
}

#twocol table.threeCol td {
		font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
	}
#twocol table.threeCol th, table.threeCol td { padding: 0 1.5em; } 
#twocol table.threeCol th, table.threeCol td {
	border-left: 1px solid #727373;
}

#twocol table.threeCol th:first-child, table.threeCol td:first-child { 
	border-left: 0
}
#twocol table.threeCol td:last-child  {
	text-align: right
}

body#research li h3 { display: inline }
body#research li h3:after {
	content: ":"
}
body#research ul + h2 { margin-bottom: -0.5em }

#twocol a#toggle { width: 100px; height: 16px; padding-top: 4px }

#twocol ol > li > ol { list-style-type: lower-alpha }
#twocol ol > li > ol  > li > ol{ list-style-type: decimal }
#twocol ol > li > ol  > li > ol > li > ol{ list-style-type: lower-roman }

body#meeting h3 {margin-bottom: -8px; margin-top: 16px }
body#meeting li > ul {
	margin-left: 20px
}

#twocol #headerImage {
border-bottom:2px solid #AFBD21;
margin-bottom:2em;
margin-left:-10px;
padding-bottom:1em;
}
a.simplebutton { display: block;height: 20px; background: #f7f6f5; border: 1px solid #727373; text-align: center; font-size: 14px; text-transform: uppercase; padding: .5em 1em; width: 200px; margin: 2em auto; -moz-border-radius: 12px; -webkit-border-radius: 12x; border-radius: 12px;}
a.simplebutton:hover { background: #727373; border-color: #eee;  }

.irb { display: block; margin-left: -7px }