@charset "utf-8";
/* CSS Document */

/*****************************************
 CSS copid from webresources /css/styles-v2-core.css to accomdate page preview in CMS
 *****************************************/
body {
    /** background-color:#002244;
    margin-top:10px;
    font-family: Trebuchet, "Dosis", Arial, Helvetica, sans-serif;
    font-size:13px;
    height:100%; **/
}

strong, b {font-weight:bold;}
em, i {
    font-style:italic;
/* 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. */
    height: 1%;
}

a {
    color: #1866af;
    font-weight: bold;
    text-decoration: none;
    outline:none;
}
a:visited {color: #1866af;}
a:hover, a:focus {text-decoration: underline;}
a:active {outline:none;}
a:hover img, a:focus img {
    filter:alpha(opacity=75);
    -moz-opacity:0.75;
    opacity:.75;
}
/* 130227 cc - messing around with h1-6 sizes and colors */
/* 130731 cc - changing h2,h3 caps and h3 color per request */
h1, h2, h3, h4, h5, h6 {font-weight: bold;}
h1, h2, h3 {color: #002244; margin: 15px 0 5px 0;}
h1 {
    font-size: 250%;
    text-transform:uppercase;
/*  font-size: 125%;*/
}
h2 {
    font-size: 130%;
/*  font-size: 110%;
    color: #1866af;*/
}
.heading h2 {font-size:110%; padding:8px 0 8px 16px; margin:0; text-transform:uppercase;}
h3 {
    font-size: 120%;
/*  font-size: 100%;
    color: #1866af;
    color: #224466; /* just a little lighter than the h1's #002244 */
}
h4 {
    font-size: 110%;
/*  color: #224466; /* just a little lighter than the h1's #002244 */
}
h5 {
    font-size: 100%;
/*  font-size: 90%;
    color: #002244;*/
}
h6 {
    font-size: 90%;
/*  font-size: 80%;*/
}

p {margin-bottom: 8px;}

th {font-weight: bold;}

/* 130227 cc */
ul {margin-top:0;}


/*****************************************
 GENERIC CLASS/ID styles
 *****************************************/
.clearfloat { 
/* this class should be placed on a div or break element and should be the final element before the 
   close of a container that should fully contain a float */
    clear: both;
    height: auto !important;
    font-size: 1px;
    line-height: 0px;
}
.clear {clear:both;}

/* 110513 cc */
.bkgd_gradient1 {
    background-image:url("../images/fondo2.png"); 
    background-repeat:repeat-x;
}

.border_right {border-right:1px solid #babcbd;}
.border_rightbottom {
    border-right:1px solid #babcbd;
    border-bottom:1px solid #babcbd;
}
.border_bottom {border-bottom:1px solid #babcbd;}
.border_leftbottom {
    border-left:1px solid #babcbd;
    border-bottom:1px solid #babcbd;
}
.border_left {border-left:1px solid #babcbd;}

.border_top {border-top:1px solid #BABCBD;}
.no-borders td, .no-borders th {border:0;}

.div_hor {
    background-color:#ffde00;
    height:4px;
    width:100%;
    margin:0px auto 0px auto;
}

.nomargin { 
    margin-top:0px !important; 
    margin-bottom:0px !important; 
    margin-left:0px !important; 
    margin-right:0px !important; 
}
.nopadding { 
    padding-top:0px !important;
    padding-bottom:0px !important;
    padding-left:0px !important;
    padding-right:0px !important;
}

.hide {display:none; !important}
.show {display: inline;}

img.overlay {left:0; top:0; position:absolute;}

.fL {float: left;}
.fR {float: right;}
.aR {text-align:right;}
.aL {text-align:left;}
.TR {background-position: right top;}
.BR {background-position: right bottom;}
.TL {background-position: left top;}
.BL {background-position: left bottom;}

.color1 {background-color: #cfdbeb;}
.color2 {background-color: #d7d7d7;}
.color3 {background-color: #fcedb6;}
.color4 {background-color: #ced6c9;}

.breadcrumbs {
    font-size: 90%;
/*  text-transform:capitalize;*/
}
div.breadcrumbs {padding:8px 0; text-align:left;}
.singleColumn div.breadcrumbs {margin:0; padding:8px 16px;}

hr.buffer {height:1px; width:90%; border:0; margin:20px auto; color:#ccc; background-color:#ccc;}

.roomy li {padding-bottom:12px;}

.moreLink a {text-transform:uppercase; font-weight:bold; font-size:85%;}

.subnav a.current {color: #002244;}

div.back2top {text-align:right; margin:8px;}
.back2top a {font-size:90%; font-weight:normal; margin-left:8px;}



/*****************************************
 PAGE LAYOUT styles
 *****************************************/
div.pageWrapper {margin:0 auto; width:1100px;}

div.container_body {
    position:relative;
    background-color:#FFFFFF;
    /* 120925 cc - removed padding-top for tabs 
    padding: 4px 0 10px 0;*/
    padding: 0 0 10px 0;
    /* 120925 cc - removed border-top for tabs 
    border-top: 1px solid white;*/
    /* 111118 cc - added to trigger hasLayout for IE7 */
    min-height:0;
}

/* this style is followed by an ie hack to compensate for the double margin bug */
div#col_right {
    position: relative;
    width: 228px;
    padding: 0px;
    float: right;
    margin-right: 4px;
}
html > body div#col_right {margin-right: 8px;}

div#col_center, div#col_center_expanded, div#col_left, div.singleColumn {
    position: relative;
    margin:0;
    padding-left: 8px;
    min-height: 700px;
    height: auto !important;
    height: 700px;
    background-color:#ffffff;
}

div.singleColumn {
    width: 960px;
    text-align: center;
    padding:0;
}

div#col_center {
    float: left;
    width:800px;
}

div#col_center_expanded {
    float: right;
    padding-right: 8px;
    width:800px;
}

.container_col_middle {
    margin:0;
    padding: 4px 16px;
    background-color:#F1F4F7;
}

.container_col_middle p{
    margin:0;
    padding: 4px 16px;
    background-color:#F1F4F7;
	font-family: "Dosis";
    color:#000;
    font-size:17px;
}

#col_left {
    float: left;
    width:228px;
}

div.footer { 
/*  width:960px; 
    margin: 25px auto 0px auto; 
    padding-bottom:25px; */
    margin: 25px auto; 
    clear: both; 
    color: #FFFFFF; 
    text-align: center;
}
.footer a {color:#FFFFFF; font-weight:normal;}
.footer a:visited {color:#FFFFFF;}


/* 121207 cc - styles to support 2-col flex width page */
/* found this fixed/flex combo solution at http://www.pagecolumn.com/liquidfixed/2_col_fix_liquid.htm */
.flex div.pageWrapper {width:98%; clear:both;}
.flex div.container_body {float:left; width:100%;}
.flex div#col_left {margin-left:-100%;}
.flex div#col_center_expanded {width:auto; padding-bottom:20px; margin-left:240px; /* 228px column + 12px gutter */}


/*****************************************
 HEADER styles
 *****************************************/
.image_header {
    width:960px;
    margin:0px auto;
    padding:0px;
}

.long_pic {
    background-color:#FFFFFF;
    display:block;
    width:1110px;
    margin-left:6px;
    border-bottom:1px solid #BABCBD;
}

.logo_header {padding-top:5px;}

.container_header_top {margin: 0 auto;}
.container_header_top table {width:100%;}
.container_header_top td {width:50%;vertical-align:middle;}

.header_top_right {
    padding:0px;
    margin:0; 
    float:right;
}
.header_top_right form {
    margin-top:0px;
    vertical-align:top;
}
.header_top_left {float:left;}

div.heading {height:35px;}


/*****************************************
 SEARCH styles
 *****************************************/
.searchEnd, .searchCenter {background-color:#002244}
.searchCorner {
    
    background-repeat:no-repeat;
    height:8px;
    line-height:8px;
    width:8px;
}
.searchEnd {height:20px;width:8px;}
.searchCol {float:right;}
.searchCenter {height:24px;padding: 6px 0;color:#FFFFFF;text-align:left;}
.searchCenter .textBox {height: 18px;font-size:90%;}
.searchCenter .btn_go {margin-top:2px;}

.btn_go {
    float:left;
    background-repeat:no-repeat;
    color:#FFFFFF;
    width:33px;
    height:21px;
    border:none;
    padding:0px;
    margin:0px;
}



/*****************************************
 TOPNAV styles
 *****************************************/
.nav_top {
    background-color:#002244;
    height:auto;
    /* 120925 cc - why isn't there padding on top?
    padding-top:0;
    padding-bottom:5px;*/
    padding:5px 0;
    text-align:center;
    vertical-align:middle;
    margin: 0px auto;
}

.nav_top a {
    font-family: Trebuchet, "Dosis", Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:13px;
    text-decoration:none;
    font-weight:bold;
    margin-left:60px;
    margin-right:60px;
}
.skinny a {
    margin-left: 10px;
    margin-right: 10px;
}
.nav_top a:visited {color:#FFFFFF;}
.nav_top a:hover, .nav_top a:focus {
    font-family: Trebuchet, "Dosis", Arial, Helvetica, sans-serif;
    color:#ebc754;
    font-size:13px;
    text-decoration:none;
    font-weight:bold;   
}



/*****************************************
 LEFTNAV styles
 *****************************************/
/* 110526 cc - made this file compatible with the old .glossymenu left nav code */
#navContainer, .glossymenu {
    width: 228px;
    background-color:#FFFFFF;
    border-bottom: 1px solid #babcbd;
	
}
#navContainer ul, .glossymenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#navContainer ul li {
    padding: 0;
    margin: 0;
/*  border-bottom: 1px solid #babcbd;*/
    list-style:none;
}
#navContainer ul li ul, .glossymenu div ul {
    margin: 0px 0px 10px 0px;
}

#navContainer ul li ul li, .glossymenu div ul li {
    border: none;
    margin-left:15px;
    margin-bottom:10px;
	font: bold 15px "Dosis", Arial, Helvetica, sans-serif;
    color: #ff0000;
}
#navContainer ul li ul li a, .glossymenu div ul li a {
    font-weight: normal;
    line-height: 100%;
}
#navContainer .navTop a {
    border-top: none;
	
}

a.menuitem {
    font: bold 15px "Dosis", Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    color: #FF0000;
    text-decoration:none;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    display:block;
    border:0;
    border-top: 1px solid #babcbd;
    outline:none;
    padding:8px 15px;
}
a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    position: absolute;
    top: 12px;
    right: 0px;
    border: none;
}


/*****************************************
 PAGE TAB styles
 *****************************************/
#tabText {
  float: left;
  background-color: #FFDE00; 
  height: 2.2em;
  padding: 0em .4em;
}
#tabText h1 {
  font-family: "Dosis", Arial, Helvetica, sans-serif;
  font-size: 160%;
  text-transform: uppercase;
  color: #002244;
  line-height: .4em;
}
#tabR, #tabL {
  background-color: #FFDE00; 
  float: left;
  width: 75px;
  height: 2.2em;
  background-image: url(//www.som.uci.edu/images/global/tab.png);
  background-repeat: no-repeat;
}
#tabR {background-position: bottom right;}
#tabL {background-position: bottom left;}


/*****************************************
 TABLE styles
 *****************************************/
table.border {border-collapse: collapse;}
table.border td, table.border th {
    border: 1px solid black;
    vertical-align: top;
    padding: 2px 4px;
}

.sortable th, .sortable td {padding:2px 6px;}
.sortable thead th {
  background-color:#CFDBEB;
  cursor: hand;
  cursor: pointer;
}
.sortable .even{background-color:#FCEDB6;}


/*****************************************
 BUTTON styles
 *****************************************/
/* MYBUTTON (CSS3) */
.myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    box-shadow:inset 0px 1px 0px 0px #54a3f7;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
    background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
    background-color:#007dc1;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #124d77;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:13px;
    padding:6px 8px;
    text-decoration:none;
    text-shadow:0px 1px 0px #154682;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
    background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
    background-color:#0061a7;
}
.myButton:active {
    position:relative;
    top:1px;
}
a.myButton:visited {color:#FCEDB6;}


/*****************************************
 CSS copid from webresources /css/SpryTabbedPanel.css to accomdate page preview in CMS
 *****************************************/
.TabbedPanels {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    clear: none;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}


.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}


.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	padding: 4px 10px;
	margin: 0px 1px 0px 0px;
	font: bold 1em sans-serif;
	background-color: #DDD;
	list-style: none;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #999;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
}


.TabbedPanelsTabHover {
	background-color: #CCC;
}


.TabbedPanelsTabSelected {
/* 120525 cc - changed color to match collapsible panel color
	background-color: #EEE; */
	background-color: #68AEF6;
	border-bottom: 1px solid #EEE;
}


.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}


.TabbedPanelsContentGroup {
	clear: both;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
/* 120525 cc - ug. ly.
	background-color: #EEE; */
	background-color: #fff;
}


.TabbedPanelsContent {
	overflow: hidden;
	padding: 4px;
}


.TabbedPanelsContentVisible {
}



.VTabbedPanels {
	overflow: hidden;
	zoom: 1;
}

/* This selector floats the TabGroup so that the tab buttons it contains
 * render to the left of the active content panel. A border is drawn around
 * the group container to make it look like a list container.
 */
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 20em;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTabSelected {
/* 120525 cc - changed color to match collapsible panel color
	background-color: #EEE; */
	background-color: #68AEF6;
	border-bottom: solid 1px #999;
}

/* This selector floats the content panels for the widget so that they
 * render to the right of the tabbed buttons.
 */
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}

/* Styles for Printing */
@media print {
.TabbedPanels {
	overflow: visible !important;
}
.TabbedPanelsContentGroup {
	display: block !important;
	overflow: visible !important;
	height: auto !important;
}
.TabbedPanelsContent {
	overflow: visible !important;
	display: block !important;
	clear:both !important;
}
.TabbedPanelsTab {
	 overflow: visible !important;
	 display: block !important;
	 clear:both !important;
}
}

/** Additional Fixes for When in CMS Preview Mode **/
UL#ImageSlideShow {
    padding:0;
}
UL#ImageSlideShow li {
    list-style-type:none;
    display:none;
}
UL#ImageSlideShow li:first-child {
    display:inline-block;
}



/*****************************************
 *           TABLE of CONTENTS           *
 *****************************************
 FEATURE INDEX styles
 FEATURES styles
 NEWS/EVENTS styles
 VIDEO-MENU styles
 VIDEO (640x480) styles
 VIDEO (old video-page datadef) styles
 COMMON PAGE styles
 *****************************************/
 
 
/*****************************************
 FEATURES INDEX styles
 *****************************************/
.heading_feature_index h1 {margin-bottom:0;}

.newsFeature div.preview {
    clear:both;
    position:relative;
    min-height:100px;
}
.newsFeature .preview img {
    float:left;
    margin-right: 15px;
    margin-bottom: 5px;
}
.newsFeature .preview h4 img {
    float: none;
}
div.newsFeature h4 {    
    vertical-align:top;
    padding:0 0 10px 0;
}
div.newsFeature hr {
    clear:both;
    width: 100%;
    height: 1px;
    color: #babcbd;         /* for ie */
    background-color: #babcbd;  /* for ff */
    text-align: center;
    margin: 5px 0 5px 0;
    border:0 none;
    
}



/*****************************************
 FEATURES styles
 *****************************************/
.feature .w1 {width: 472px;}
.feature .w2 {width: 320px;}
.feature .w3 {width: 228px;}

div.inset {
    float: right;
    margin:0px 0px 12px 12px;
}
/* 111013 cc
.inset div.heading {padding: 0 0 8px 0;}*/
.inset div.heading {padding: 0 0 5px 0;}
.inset .heading div.button {margin-top:0; padding-right:8px; float:left;}
/*.inset .heading div.button, .inset .heading iframe {margin-top:0; padding-left:12px; float:left;}*/
.inset .heading h4 {display:inline; padding-left:6px; float:left; margin-top:2px; font-size:80%; text-

transform:uppercase;}
.inset .heading img {float:left;}

.heading .email img {margin-top:0px;}
.heading .print img {margin-top:1px;}
/* 110808 cc - replaced with addthis styles below
.heading .share img {margin-top:2px;}
.heading iframe.twitter-share-button {margin-top:0px;}
.heading iframe.fb_ltr {padding-left:4px;}
*/
div.addthis_toolbox {display:inline; float:right; min-width:190px; text-align:right;}
.addthis_toolbox a {margin-top:2px;}
.addthis_toolbox a.addthis_button_facebook_like {margin-top:0;}
.addthis_toolbox a.addthis_counter {margin-top:2px;}        /* 111013 cc - added to compete with 

addthis' style specificity */
.addthis_toolbox a.addthis_counter a.addthis_button_expanded {margin-top:0;}

div.storyMedia {border:1px solid #babcbd; background-color: #CCCCCC; position:relative; z-index:100;}
.storyMedia .photo_credit {
    font-size: 80%;
    text-align: right;
    padding: 4px 4px 0 0;
    background-color: #CCCCCC;
}
.storyMedia .caption {
    font-size: 90%;
    padding: 8px;
    background-color: #CCCCCC;
}

.storyText h1 {
    text-transform: none;
    margin: 4px 0 0 0;
    padding: 0;
    font-size: 150%;
}
.storyText h2 {
    text-transform: none;
    padding: 0;
}
.storyText .div_hor2 {
    border-top: 3px double #BABCBD;
    margin: 12px 0 8px 0;
}
/* 110131 cc - this needs to be revamped, so.... */
/* 110527 cc - changed all 375px to 360px and 220px to 210px */
.storyText .long   {width: 450px;} /* for 228x152 images */
.storyText .medium {width: 360px;} /* for 320x240 videos */
.storyText .short  {width: 210px;} /* for 472x315 images */

.storyText div.related_links {
    float: left;
    width: 225px;
    margin: 4px 12px 4px 0px;
    padding: 8px 8px 8px 12px;
    background-color: #CCCCCC;
    z-index:100;
}
.storyText .related_links h1 {font-size: 100%;}
.storyText .related_links ul {
    padding-left: 16px;
    margin: 8px 0;
}
.storyText .related_links li {margin-bottom: 8px;}
.storyText .related_links img {margin-left: 4px;}
.storyText .related_links .imgEmbed img {margin:0; vertical-align:top; max-width:180px;}


/* to handle non-v2 legacy features */
.storyText h2 {display: inline; border-bottom:0;}
div#intro {display:inline;}
.feature div.inset .w2 {width: 320px;}
.feature div.inset .w3 {width: 228px;}



/*****************************************
 NEWS/EVENTS styles
 *****************************************/
.news h1 {}
.news h2 {}
.news table {margin-bottom:20px;}
.news th {font-weight:bold;}
.news th, .news td {padding:4px 8px;}
.news td.date {width:15%;}
.news td.description {width:80%;}
/* counter font reduction from v2.5 index css file */
.news td.description a {font-size:100%}



/*****************************************
 VIDEO-MENU styles
 *****************************************/
ul.video-menu { background-color:#FFF; padding:0; margin:0; list-style:none outside none; width:650px;}
.video-menu li {padding:0; margin:0;    display:block; clear:left; margin-bottom:20px;}
.video-menu li i {padding:10px; margin:0; font-size: 90%;}
a.video-menu-item div {
  display:block;
  float:left;
  position:relative;
  text-align:left;
  font-weight:400;
  color:black;
  background-color: #f3f6fb;
/* 131203 cc - why was the left pad 18px?  i dunno...
  padding:10px 10px 10px 18px;*/
  padding:10px;
  margin-bottom:12px;
  height:70px;
  width:450px;
}
a.video-menu-item div.video-thumbnail {background-color:#1866AF; width:125px; height:70px; text-align:right;}
a.video-menu-item div.video-info {text-align:center; color:#1866af;}



/*****************************************
 VIDEO (640x480) styles
 *****************************************/
div#video {margin-left:40px;}
#video h4 {
    margin-top: 10px;
    text-transform: uppercase;
    color: #000000;
}
#video h5 {
    font-weight:normal;
    text-transform: uppercase;
    border-bottom: 1px solid #BABCBD;
}



/*****************************************
 VIDEO (old video-page datadef) styles
 *****************************************/
div.video {margin: 20px auto; border:1px solid #ffffff; background-color:#ffffff; position:relative;}
.video .caption {padding:8px;}



/*****************************************
 *           TABLE of CONTENTS           *
 *****************************************
 INDEX - GALLERY styles
 INDEX - SPOTLIGHTS/FEATURES styles
 INDEX - NEWS/EVENTS styles
 RIGHTCOL BOX styles
 *****************************************/


/*****************************************
 INDEX - GALLERY styles
 *****************************************/
.gallery {width:228px; height:190px;}
.gallery .heading {background-color: #FCEDB6;}



/*****************************************
 INDEX - SPOTLIGHTS/FEATURES styles
 *****************************************/
.menu {float: right; margin: 4px;}
.spotMenuHigh, .featuresMenuHigh {color: #002244; font-size: 120%;}
 
.spotlights {}
.spotlights h2 {width: 100px; float: left;}
.spotlights .heading {background-color: #CFDBEB;}
.teaser { margin: 8px;}
.teaser p {margin-bottom:15px;}
.teaser a {margin-bottom:15px;}

.features {padding-bottom: 8px; border-bottom: 1px solid #babcbd;}
.features .heading {background-color: #CED6C9;}

/* the following is to accomodate legacy html code. */
.features_caption {padding: 8px 0 0 16px; background-color: #FFFFFF;}

/*.features .caption {padding: 4px 0; background-color: #FFFFFF;}*/
.features .caption {padding: 8px 0 0 16px; background-color: #FFFFFF;}
.features .featBig .caption {padding: 8px 16px 16px 16px;}
div.featMore {margin-left: 16px;}
.featSm {float: left; width: 136px; margin-right: 16px;}
.featSm img {width: 136px; height: 90px;}



/*****************************************
 INDEX - NEWS styles
 *****************************************/
.news table {margin-bottom: 8px;}
/*.news td {padding: 4px 8px;}
.news td a {font-size: 90%; font-weight: normal;}*/
.news td {padding: 4px 8px; font-size: 90%; font-weight: normal;}
.news th div.bkgd1, .news th div.bkgd2 {
    position: relative;
    margin-top: 3px;
    background-repeat: no-repeat;
/*  background-position: 10px 7px;*/
    height: 50px;
    width: 47px;
    font-size: 90%;
/*font-weight: bold;*/
    font-family: "Times New Roman", Times, serif;
}
th div.bkgd1 {background-image: url('//www.som.uci.edu/images/dateArt.jpg');}
th div.bkgd2 {background-image: url('//www.som.uci.edu/images/dateArt2.jpg');}
th div.bkgd3 {background-image: url('//www.som.uci.edu/images/dateArt3.jpg');}
.news th div.day, .news th div.month {
    position: absolute;
    width: 90%;
    text-align: center;
}
.news th div.month {top: 26px; color: #222222;}
.news th div.day {top: 2px; color: #DDDDDD;}



/*****************************************
 RIGHTCOL BOX styles
 *****************************************/
.box {clear:both; padding-bottom: 8px;}
.box h2 {color: #002244; padding-left: 8px;}
.box .body {padding: 8px;}
.box p {padding: 0px;}
.box ul {margin: 0px; padding:0px;}
.box li {margin-bottom: 8px; list-style-type:none; text-transform:none;}


/*****************************************
 SpryCollapsiblePanel Styles
 *****************************************/
/* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the container that encapsulates each set of collapsible drawers */
.spry_wrapper {
    margin-bottom: 12px;
}

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel {
	margin: 0px;
	padding: 0px;
	width: 650px;
}

/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanelTab {
	background-color: #DDD;
	border-bottom: solid 1px #CCC;
	margin: 0px;
	padding: 5px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
}


.CollapsiblePanelContent {
	margin: 0px;
/* 120525 cc - too dang much padding!
	padding: 12px 5px 0px 5px; */
	padding: 4px;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This is an example of how to make the text within the anchor tag look
 * like non-anchor (normal) text.
 */
.CollapsiblePanelTab a {
	color: black;
	text-decoration: none;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanelTab {
	background-color: #EEE;
}

/* This is an example of how to change the appearance of the panel tab when the
 * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
 * whenever the CollapsiblePanel is closed.
 */

.CollapsiblePanelClosed .CollapsiblePanelTab {
 /* background-color: #EFEFEF */
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
	background-color: #CCC;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanelTab {
	background-color: #68aef6;
}