/******************************************
  GLOBAL HTML STYLES
 ******************************************/

/* Set everything's font size to the size of its parent.
   Remove all margins & boverlayorders and redefine them later.  */
* {
  font-size: 100%;
  border: 0;
  margin: 0;
  padding: 0;
}

* html {height: 1%}

body {
  font-family: Trebuchet, Trebuchet MS, Arial, Helvetica, sans-serif;
  color: #EFEFEF;
  font-size: 80%;
  background-color: #002244;
  text-align: center;
  min-width: 100px;
}

a { 
  text-decoration: none;
  color: #FFFFFF;
}

a:link, a:visited {
  color: #FFFFFF;
}

p a:link, p a:visited {
  color: #2266BB;
}

a:hover, a:active {
  text-decoration: underline;
}

a:hover img { 
  opacity: .75;
  filter:alpha(opacity=75);
  text-decoration: none;
}

a:hover object {
  opacity: .75;
  filter:alpha(opacity=75);
}

/* this is to correct an IE7 display issue.  see
   http://test.rowanw.com/elements-disappear-due-italic-text and
   http://www.satzansatz.de/cssd/onhavinglayout.html for details. */
em, i {
  height: 1%;
}

h1, h2, h4 {
  font-size: 100%;
  padding: .5em;
}

h1 {
  font-weight: bold;
  text-align: center;
  color: #002244;
  font-size: 200%;
}

h2 {
  font-weight: bold;
}

h3 {
  text-align: center;
  background-image: url("/uci/images/hrline.gif");
  background-position: center left;
  background-repeat: repeat-x;
  margin: 1em;
}

h3 span {
  text-transform: uppercase; 
  background-color: white;
  color: #000066;
  padding-left: 1em;
  padding-right: 1em;
}

h5 {
  font-weight: bold;
  color: #23476B;
  text-align: left;
  font-size: 130%;
}

hr {
  width: 100%;
  height: 1px;
  color: #8D9BC6; 		/* for ie */
  background-color: #8D9BC6;	/* for ff */
  text-align: center;
  margin: 3px 0;
}

.clear {
  clear: both;
  height: 0;
  line-height: 0;
}

hr.blue {
  margin: 5px 0px;
  color: #000066;
  background-color: #000066;
  border-top: none;
  border-bottom: none;
  border-left: 1em solid white;
  border-right: 1em solid white;
}

/* correct for ie6 png transparency issue */
img {
  behavior: url(/uci/scripts/iepngfix.htc);
} 

input.button { 
  padding: .25em;
  border: 1px outset;
}

input.text {
  padding: .25em;
}

p { 
  padding: .75em;
  color: #EFEFEF;
}

textarea { 
  font-family: Trebuchet, Trebuchet MS, Arial, Helvetica, sans-serif;
  padding: .25em;
}

ul, ol { 
  margin-left: .75em;
  padding-left: 1.25em;
}

li {
  margin-top: .25em;
  margin-bottom: .25em;
}

.listNoBullet ul {
  list-style: none;
  margin-left: 0;
}


/******************************************
  GLOBAL STYLES
 ******************************************/

.alignLeft {
  text-align: left;
}

.alignCenter {
  text-align: center;
}

.alignRight {
  text-align: right;
}

.back2top {
  padding: 1em;
}

.bkgd_bluegray {
  background-color: #adbccf;
}

.bkgd_gradient1 {
  background-image: url('/uci/images/bg_grad_003377-002244.png');
  background-repeat: repeat-x;
}

.bkgd_gradient2 {
  background-image: url('/uci/images/bg_grad_003377-002244.png');
  background-repeat: repeat-x;
  background-position: 0px -100px;
}

.bkgd_gradient3 {
  background-color: #003377;
  background-image: url('/uci/images/bg_grad_003377-002244.png');
  background-repeat: repeat-x;
  background-position: bottom;
}


.hidden {
  display: none;
}

.pad4 {
  padding: 4px;
}

.L2liImg {list-style: none;}
.L2liImg img {border: 1px solid #FFFFFF;}


/******************************************
  GLOBAL LAYOUT STYLES
 ******************************************/

div.base {
  clear: both;
  height: 0;
}

div.pageContainer {
  text-align: left;
  width: 960px; /* column1 + column2wide + 16px margin */
  margin: 10px auto;
}

div.column1 {
  clear: left;
  float: left;
  width: 228px;
  min-height: 500px;
  height: auto !important;
  height: 500px;
}

div.column2, div.column2wide {
  float: right;
  margin: 0;
  padding: 0;
}

div.column2 {
  width: 472px;
}

div.column2wide {
  width: 716px; /* column2 + column3 + 16px margin */
  }

div.column3 {
  float: right;
/* 081009 cc - somewhere along the line we introduced an extra pixel to either column2 or column3, causing things to shift.  this is my TEMPORARY workaround */
/* 081017 cc - GEEZ.  somehow we lost two more pixels in IE 6/7. */
/*  margin-left: 16px;*/
  margin-left: 12px;
  width: 228px;
}
html>body div.column3 { 
  margin-left: 16px; 
}

div.column2a, div.column2b {
  width: 331px;
  padding: 16px 8px;
}

div.column2a {
  float: left;
}

div.column2b {
  float: right;
}

div.column2ab {
  width: 690px;
  float: right;
  padding: 1em;
  padding-top: 1em;
  position: relative;
}

div.mainContent {
/* ie does not honor min-height.  
   fortunately, it treats height as min-height, so it doesn't have the potential 
   text overrun problem.  there are lots of versions of this hack, but i like 
   this one as it requires no changes to html, nor any additional css styles */
  min-height: 300px;
  height: auto !important;
  height: 300px;
  margin: 8px 0 0 0;
}

/* 050512 cc - put a:hover underline back in for feature links */
.mainContent a:hover h4 {text-decoration:underline;}

div.mainLower {
/* these three styles used to resolve an odd ie6 rendering issue */
  width: 472px;
  overflow: hidden;
}

.mainLower div.splitcol1 {
  float: right;
}

.mainLower img {
/*  margin: 10px 0 0 0;*/
}

div.feature {
  float: left;
  margin: 8px 0px 8px 16px;
  padding: 0;
  width: 136px;
  display: inline;
/*  position: relative;*/
}

img.feature { 
/*  border: 1px solid #FFFFFF; */
  float: left;
}
img.overlay {position: absolute; top: 0px; left: 0px}

div.subFeature, div.splitCol1, div.splitCol2 { 
  border: none;
  background-color: transparent;
  width: 228px;
  margin: 8px 0 0 0;
}

div.divHeader h2, div.divHeader h2 a:link, div.divHeader h2 a:visited  {
  text-transform: uppercase;
  color: #FFCD05;
  font-size: 14px;
  padding-left: 0;
  padding-top: 0;
}

div.photoCredit {
  text-align: right;
  padding: 0 5px;
  color: #666666;
  font-size: 80%;
}

div.moreLink {
  text-align: right;
  vertical-align: bottom;
  padding: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #FFCD05;
  text-transform: lowercase;
}

div.moreLink a:link, div.moreLink a:visited {
  color: #FFCD05;
}

div.imageHeader {
  width: 960px;
  overflow: hidden;
}

div.imageHeader img {
  border-bottom: medium solid #FFFFFF;
}

div.research {
  text-align: center; 
  background-color: #adbccf;
  width: 100%;
}


/******************************************
  EMERGENCY BLOCK STUFF
 ******************************************/

div.emergency {
  clear: both;
  display: block;
  margin: 8px 0 0 0;
  background-color: #EFEFEF;
  border: 1px solid #EFEFEF;
}

div.emergency a:link {
  color: #333333;
}

div.emergency h1 {
  margin: 0;
  padding: .25em 0 .25em .5em;
  font-size: 150%;
  color: #EFEFEF;
  background-color: #440000;
  background-image: url(/images/emergency_bg.png);
  background-repeat: repeat-x;
}

div.emergency h2 {
  font-size: 100%;
  font-weight: bold;
  color: #333333;
}

div.emergency p {
  font-size: 100%;
  color: #333333;
}

div.links {
  padding: .5em 0em 0em 1em;
}


/******************************************
  WEATHERBUG STUFF
 ******************************************/

div.weatherBug {
  margin: 16px;
  display: inline;
}

.weatherBug div.date {
  /* emulate .divHeader h2 */
  text-transform: uppercase;
  color: #FFCD05;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: .5em;
}

.weatherBug div.event {
  /* emulate ol li */
/*  text-transform: capitalize;*/
  color: #EFEFEF;
  font-size: 100%;
  font-weight: normal;
  display: list-item;
  margin: .25em 0 .25em .75em;
  padding-left: 1.25em;
}

/* for non-ie browsers */
html>body .weatherBug div.event {
  margin-left: 2em;
  padding-left: .25em;
}

div.yahoo {
  text-align: center;
}

div.nextToUadvBug {
  float: left;
  overflow: hidden;
  position: relative;
  /*for b-size bug*/
  width: 272px !important;
  width: 256px;
  
  /*for 100 width bug
  width: 308px !important;
  width: 292px;*/
  
  /*for 85 width bug
  width: 322px !important;
  width: 307px;*/
}

div#uadvBug {
  display: inline;
  float: right;
  margin: 16px;
}


/******************************************
  WHITE BACKGROUND STUFF
 ******************************************/

div.whiteBkgd {
  background-color:#FFFFFF;
  padding: 8px;
  color: #333333;
}

div.whiteBkgd a:link, div.whiteBkgd a:visited {
  color: #2266BB;
  font-weight: bold;
}

div.whiteBkgd a:hover {
  text-decoration: underline;
}

div.whiteBkgd h1, div.whiteBkgd h2, div.whiteBkgd h3, div.whiteBkgd h4, div.whiteBkgd h5, div.whiteBkgd h6 {
  color: #333333;
}

div.whiteBkgd p {
  color: #333333;
}

div.whiteBkgd td, div.whiteBkgd th {
  color: #333333;
}

div.featureBottom {
  color: #FFFFFF;
  width: 100%;
  line-height: 5px;
  background-image: url('/uci/images/featureBottom.png');
}

div#BL {
  width: 50%;
  float: left;
  background-position: bottom left;
  behavior: url(/uci/scripts/iepngfix.htc); 
}

div#BR {
  width: 50%;
  float: right;
  background-position: bottom right;
  behavior: url(/uci/scripts/iepngfix_v2.htc);
}

div.whiteBkgd #tabContainer {
  margin-top: -8px;
}

div.whiteBkgd #tabText {
  background-color: transparent;
  background-image: url('/uci/images/tabShadow_FFFFFF_center.png');
  background-position: bottom;
  background-repeat: repeat-x;
  height: 2.8em;
}

div.whiteBkgd #tabR {
  width: 38px;
  height: 2.8em;
  background-image: url('/uci/images/tabShadow_FFFFFF.png');
}

div.whiteBkgd #tabL {
  width: 34px;
  height: 2.8em;
  background-image: url('/uci/images/tabShadow_FFFFFF.png');
}


/******************************************
  NEWS FEATURE STUFF
 ******************************************/

/* the following is to correct IE display issues. */
/* 100302 cc - modifying cuz it caused an ie6 non-rendering issue 
.newsFeature { position: relative; } */

div.newsFeature div {
  position: relative;
}

div.newsFeature a:link, .newsFeature a:visited {
  color: #2266BB;
}

div.newsFeature h1 {
  text-align: left;
  color: #333333;
  margin: 0;
  padding: .5em 0;
  font-family: Georgia, "Times New Roman", Times, serif;
}

div.newsFeature h4 {
  color: #899AAB;
  padding: 0 0 10px 0;
  font-size: 120%;
}

div.newsFeature h5 {
  color: #999999;
  padding: 5px 5px 10px 0;
  padding: 4px 0;
  margin: 5px 5px 1em 0;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
}

div.newsFeature hr {
  width: 100%;
  clear: both;
  margin-top: 10px;
}

div.newsFeature img {
  padding: 0;
  margin: 0;
}

div.newsFeature li { padding-bottom: 12px; }

div.newsFeature p {
  padding: 0 0 .75em 0; 
  color: #333333;
}

/* 100302 cc - these are used on the features index */
.newsFeature div.preview { 
  color: #333333;
  padding-top: 1em;
  clear: both;
}

.newsFeature .preview img { 
  margin-right: 10px;
  margin-bottom: 5px;
  float: left;
}

.newsFeature .preview h4 img { 
  margin: 0;
  float: none;
}

.newsFeature .preview p { 
  padding-bottom: 5px;
  margin-bottom: 0;
}

.newsFeature div.headlines {
  float: left;
  width: 220px; /* 716 - 16(div pad) - 8(img pad) - 472(img) */
}

.newsFeature div.featureMenuBar {
  clear: both;
  width: 200x; /* 220 - 4(margin) - 16(pad) */
  min-height: 20px;
  height: auto !important;
  height: 20px;
  padding: 8px;
  margin: 2px;
  background-color: #E8E8E8;
  text-align: center;
}

.newsFeature div.featureMenuBar div {
  float: left;
  width: 58px;
  padding: 2px 4px;
  font-size: 80%;
}
.featureEmail span {position:relative; top:-4px;}
.featurePrint span {position:relative; top:-5px;}
.featureShare span {position:relative; top:-4px;}

.newsFeature div.mainImage {
  float: right;
  width: 472px;
  margin: 0px 0px 8px 8px;
  background-color: #E8E8E8;
}

.mainImage .mainCaption {
  color: #333333;
  margin: 0 5px 10px 5px;
  position: relative;
}
.newsFeature div.feature_left {
  margin: 0px 24px 8px 4px;
  padding: 4px;
  float: left;
  max-width: 240px;
  /* another IE hack */
/*  width: expression(this.width > 220 ? 220: true);*/
  width: expression(240 + "px");
  background-color: #E8E8E8;
}

.newsFeature .feature_left ul {
  list-style: none;
  margin-left: 0;
  padding-left: 8px;
}

.newsFeature .feature_left li {
  margin-left: 0;
  padding-left: 0;
  padding-bottom: 4px;
}

.newsFeature .featureAuthor {
  font-style: italic;
  text-align: right;
}


/******************************************
  SPOTLIGHT STUFF
 ******************************************/

div.spotlight {text-align: left;}

.spotlight h2 {display: inline; float: left;}
.spotlight h4 {padding: .5em .25em 0 .75em;}

/* 050512 cc - put a:hover underline back in */
.spotlight a:hover h4, .spotlight a:hover p {text-decoration:underline;}

.spotlight .hide {display: none;}
.spotlight .show {display: inline;}

.spotlight div.spotlightMenu {
  display: inline;
  float: right;
  vertical-align: top;
  padding-right: 10px;
  padding-top: 0px;
}

.spotlight .spotMenuHigh {
  font-size: 110%;
  font-weight: bold;
}

.spotlight .spotMenuNorm {
  font-size: 90%;
  font-weight: normal;
} 

/*The styles for spotlights on second level pages.*/
div.spotlight1 {
  clear: both;
  text-align: left;
  padding: 0em 0em 1.5em 0em;
}

.spotlight1 h2 {
  display: inline;
}

.spotlight1 img {
  padding: 5px;
}


/******************************************
  PAGE TAB STUFF
 ******************************************/

#tabText {
  float: left;
  background-color: #FFFFFF;
  height: 2.2em;
  padding: 0em .4em;
}

#tabText h1 {
  font-family: "Times New Roman", Times, serif;
  font-size: 160%;
  text-transform: uppercase;
  color: #002244;
  line-height: .4em;
}

#tabR {
  float: left;
  width: 30px;
  height: 2.2em;
  background-image: url(/uci/images/tab.png);
  behavior: url(/uci/scripts/iepngfix_v2.htc);
  background-position: bottom right;
  background-repeat: no-repeat;
}

#tabL {
  float: left;
  width: 30px;
  height: 2.2em;
  background-image: url(/uci/images/tab.png);
  behavior: url(/uci/scripts/iepngfix_v2.htc);
  background-position: bottom left;
  background-repeat: no-repeat;
}

/******************************************
  SEARCH RESULTS STUFF
 ******************************************/

#cse-search-results {
  /*max-height: 81em;*/
}
#cse-search-results iframe {width: 700px;}


/******************************************
  HOMEPAGE FEATURE ROTATION STUFF 
 ******************************************/
.hpFeatures {
  position: relative;
}

.hpFeatures h2 {
  margin: 16px 0 0 16px;
  padding: 0;
}
.hpFeatures h4 {
/*
  border: 1px solid blue;
  line-height: 30px;
  vertical-align: top;
*/
}
.hpFeatures a h4 img {
  margin-left: 5px;
}
.hpFeatures a .mainCaption h4 br {
  display: none;
}


/******************************************
  UCIMPACT STUFF 
 ******************************************/

#impactcontainer p {line-height: 1.4em;}

#impactcontainer h1 {
  color: #FFFFFF;
  font-family: "Times New Roman", Times, serif;
  font-variant: small-caps;
  font-weight: normal;
  font-size: 300%;
  padding: 8px 0;
}
#impactcontainer h1 span {text-transform: lowercase;}

#impactmain {padding: 24px .75em;}
#impactmain a {color:#FFFFFF;}
#impactmain #impactmain_text {
  float: left;
  width: 182px;
}
#impactmain img {
  float: left;
  margin-right: 16px;
}
#impactmain h2 {margin-left: 16px;}
#impactmain h2 a {
  color: #FFCD05;
  font-size: 120%;
}

.impactsecondary {
  clear: both;
  margin: 16px .75em;
	height: auto !important;
	height: 90px;
	min-height: 90px;
}

.impactsecondary div {
  padding: 8px;
}

div.impactsecondary h2 {
	margin-bottom: 8px;
	padding: 0;
}

.impactsecondary a {
	color: #FFFFFF;
	padding: 0;
}

.impactsecondaryL {
  background-image: url(/images/horzGrad_003377-002244.png);
  background-repeat: repeat-y;
}
.impactsecondaryR {
  background-image: url(/images/horzGrad_002244-003377.png);
  background-repeat: repeat-y;
  background-position: right;
}

.impactsecondaryL img {
	postition: relative;
  float: left;
  margin-right: 16px;
}

.impactsecondaryR img {
  postition: relative;
  float: right;
  margin-left: 16px;
}

#impactlist {
  margin-top: 32px;
  font-size: 120%;
}

#impactmain img.impacticon,
.impactsecondary img.impacticon,
#impactlist img.impacticon {
  float: none;
	display: inline;
  margin: 0 2px;
}

/******************************************
  GALLERY INDEX STUFF
 ******************************************/

#galleryArchived {padding-top: 32px;}


#galleryFeatured h2, #galleryArchived h2 {
	padding: 8px 0;
	font-size: 140%;
}

.galleryFeaturedItem {
	clear: both;
	margin: 0 16px;
	padding: 16px 0;
	border-bottom: 1px dotted #FFFFFF;
}

.galleryFeaturedItem img {
	float: left;
	margin-right: 16px;
}

.galleryFeaturedItem h3 {
	margin: 0 0 8px;
	font-size: 120%;
	text-align: left;
}

.galleryFeaturedItem h3 a {
	font-style: italic;
	font-weight: bold;
}

#galleryArchived ul {
	float: left;
	width: 40%;
	padding: 8px 32px 0 16px;
}

/************************
*   FORM REFINEMENT
************************/

#refineForm {
	background-color: #e8e8e8;
    border: 1px solid #666666;
	margin: 16px 0;
    padding: 16px 16px 0 16px;
	position: relative;
}

#refineForm  > h2 {
	padding: 0;
	font-size: 140%;
}

#refineForm > div {
	clear: both;
}

#refineForm > div div {
	padding: 16px 8px;
	float: left;
}

#refineForm > fieldset {
	clear: left;
	margin-left: 8px;
}

#refineForm > fieldset > legend {
	font-size: 120%;
}

#refineForm > fieldset div {
	padding: 4px 16px 16px 0;
	float: left;
}

#refineForm label {
	padding-bottom: 4px;
	display: block;
	clear: both;
}

#refineForm select, #refineForm input {
	border: 2px inset threedface;
}

#refineForm input[type=submit] {
	position: absolute;
	left: 320px;
	bottom: 16px;
	border: 2px outset threedface;
	padding: 0 2px;
  /*IE7*/
	*padding: 0;
}