/***
 * UC Irvine template site-wide styles
 * @author Todd McGill, Strategic Communications
 Most of the sytles are in global.min.css.  If you
 want to change any of them, copy from global.min.css to this .css file
 and then change them.
 ***/

/* div[role='main'] {
	padding-bottom: 0px; background-color: rgb(242, 242, 242);
}


Links

*/

header .wordmark {
	background-repeat: no-repeat;
	background-size: auto 100%;
	display: block;
	font-family: "Times New Roman",Times,serif;
	/* old height 45, margin-bottom 24 , margin-top 28*/
	height: 77px;
	margin-top: 28px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 14px;
	text-indent: -999em;
	font-size: 225%;
	font-variant: small-caps
}

header .headlines_wordmark {
	background-repeat: no-repeat;
	background-size: auto 100%;
	display: block;
	height: 94px;
	margin-top: 28px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 6px;
	text-indent: -999em;
	font-size: 225%;
	font-variant: small-caps
}
header nav+.wordmark
{margin-top:4px
}
header nav+.headlines_wordmark
{margin-top:4px
}
header .wordmark em
{font-family:"Times New Roman",Times,serif;font-size:80%;font-variant:normal;padding-right:.25em
}
header .headlines_wordmark em
{font-family:"Times New Roman",Times,serif;font-size:80%;font-variant:normal;
}

* {
	color: #333333; /* Font color for entire site, not including links */
}

div[role="main"]
{
	/* old color was f2f2f2 */
	background-color: transparent;
	font-size: 14px;
	padding-bottom: 0px;

}
/* the rest of 'body' is in the global css file */
body{
	line-height:1.3;
	}
	


#nav-main,hr.region-divider,hr.region-divider-thin
{
	background-color: #2E5596;
	background-image: url("../images/nav_bkg5.png");
	background-repeat: repeat-x;
	border: 0;
	border-bottom: 4px solid #ffd100;
	margin: 0;
	padding: 0
}

/* The border causes a vertical line to be drawn between menu options.  I've made it not show up 
#nav-main>ul>li{border-left:1px solid #789;border-right:1px solid #789;display:block;float:left}*/


a {
	color: #275799;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

a:hover {
	outline: 0px;
	color: #999999;
	border-bottom-color: currentColor;
	border-bottom-width: 0px;
	border-bottom-style: none;
	cursor: pointer;
}
a:visited {
		color: #275799;
}
/***
 * HEADER STYLES
 ***/
.bucket-header {
		border-radius: 8px 8px 8px 8px; /* this does the rounded top. more styles in global css*/
}
header .wordmark {
	/* old height=45*/
	height: 77px;
	width: 617px;
}
header .headlines_wordmark {
	height: 94px;
	width: 950px;
}
header a.view-controls {
	display: none;
}

header {
	/* old header 8px;*/
	margin-top: 4px;
}
header a {
	font-size: 12px; border-bottom-color: currentColor; border-bottom-width: 0px; border-bottom-style: none;
}
header nav {
	text-align: right;
}

header nav li {
	display: block;
}
header nav a {
	color: rgb(102, 119, 136); line-height: 24px; margin-left: 6px;
}
header nav a:hover {
	text-decoration: underline;
}


h1
{
	font-size: 155%;
	margin: .5em 0;
	color: #275799;
}

h2
{
	font-size: 102%;
	margin: .5em 0;
	color: #275799;
}

.small_text {
		font-size: 12px;
	margin: .5em 0;
	color: #275799;
}
@media screen and (max-width: 640px) {
header nav {
	margin-bottom: 8px;
	text-align: center;
}
header nav a {
	margin: 0 4px;
}
header .wordmark {
	background-position: top center;
	height: 34px;
	margin: 16px auto 8px auto;
	width: 346px;
}
header .headlines_wordmark {
	background-position: top center;
	height: 34px;
	margin: 16px auto 8px auto;
	width: 546px;
}
header nav + .wordmark, .headlines_workmark {
	margin: 0 auto 8px auto;
}
header form {
	margin-bottom: 8px;
	position: static;
	text-align: center;
	width: auto;
}
header form.hidden {
	display: none;
	visibility: hidden;
}
header form input[type="text"] {
	width: 50%;
}
header a.view-controls {
	display: inline-block;
	width: 24px;
	height: 22px;
	text-indent: -999px;
	background-image: url('../images/view_controls.png');
	margin-right: 4px;
}
}

select{
	font-size: 100%;
	margin: 0;
	vertical-align: baseline;
	padding-top: 3px;
	padding-bottom: 3px;
}

input{font-size:100%;line-height:normal;margin:0;vertical-align:baseline;padding-top: 3px;padding-bottom: 3px;}
/***
 * MAIN NAV STYLES
 ***/
 #nav-main {
	z-index:1;
	border-width: 0px 0px 3px; /*  
	border-style: none none solid;
	border-color: currentColor currentColor rgb(255, 222, 108);
	margin: 0px;
	padding: 0px;*/
	background-image: url("../images/nav_bkg5.png");
	background-repeat: repeat-x;
	background-color: #275799;
	border-bottom-color: rgb(255, 222, 108);

}
/*  width of main menu items */

/* new from Todd*/
#nav-main .content-container {
	width: 100%;
	z-index:99;
}

/* end new */

/* This changes the width of the items insidce the nav bar */
#nav-main > ul > li {
	width:20%;

}

/* change the length of the menu with width either % or px.  IF you take background-0color out, it will be transparent*/
#nav-main .nav-main-menu {
	left: auto;
	width: 25%;
	background-color: #fefefe;
	border: thin solid #999999;

}

#nav-main .nav-main-menu a:hover {
	background-color: #FFFAD4;

}

#nav-main .nav-main-menu a {
	margin-top: 2px;
	margin-right: 2px;
	margin-left: 2px;
	margin-bottom: 2px;
	padding: 2px 4px;
	width: 98%;
	border-bottom-color: rgb(187, 187, 187);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	float: left;
	display: block;
	TEXT-DECORATION: none;
}

hr.view-controls {
	display: none;
}

/* main UCI site has 40% for width 
#nav-main .nav-main-menu > li {
	margin: 0px 0.25%; width: 100%; float: left; display: block;
}*/

#nav-main .nav-main-menu > li {
	float: none;
	width: auto;
}

/* main UCI site has 100% for width */
/* #nav-main .nav-main-menu {
	left: 0;
	padding-top: 0;
	width: 250px;
} */

#nav-main .submenu > li {
	width: 100%;
}

#nav-main .submenu li a {
	text-indent: 8px;
}

.sub-visual, .sub-visual>img{
	float: left;
	padding-right: 17px;
	clear: both;
	}
	
.inner_bucket {
	margin: 0px 0px 0px 1%;
	width: 60%;
	position: relative;
	padding-right: 6px;
	border-radius: 8px 8px 8px 8px;
	padding: 8px;
	border: 1px solid #999999;
	text-align:center;
	background:#ffffff;
}

.subbucket {
	margin: 0px 0px 0px 1%;
	width: 30%;
	float: left;
	position: relative;
	padding-right: 6px;
}
.subbucket_image_only {
	margin: 0px 0px 0px 1%;
	/*width: 42%;*/
	float: right;
	position: relative;
	padding-right: 6px;
}

.subbucket, subbucket_image_only li
{
	margin-top:.5em
}

.subbucket, subbucket_image_only li:first-child
{margin-top:0}

.subbucket .subbucket-header, subbucket_image_only .subbucket_header 
{
	margin: 0;
	padding: 3px 12px;
	background-color: #678;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px
}

:first-child.subbucket + .subbucket .subbucket-header {
	background-color: rgb(79, 119, 62);
}
.subbucket .subbucket-header {
	/*padding-left: 24px;*/
	background-repeat: repeat-y;
	border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
		/*background-image: url(http://www.humanities.uci.edu/uci/images/header_bar.png);*/
	text-align: center;
}

:first-child.subbucket {
	margin-left: 0px;
}
	
@media screen and (max-width: 840px) {
#nav-main .nav-main-menu > li {
	margin: 0;
	width: 100%;
}

#nav-main .nav-main-menu a:hover {
	background-color: #FFFAD4;
}
}

@media screen and (max-width: 640px) {
/* new from Todd*/	
	#nav-main .content-container 
	{
	width: 98%;
	}
/* end new */

#nav-main > ul > li {
	border-bottom: 1px solid #789;
	border-left: none;
	border-right: none;
	border-top: 1px solid #789;
	display: list-item;
	float: none;
	width: 100%;
}
#nav-main > ul > li > a {
	text-align: left;
}
#nav-main .nav-main-menu {
	left: 0;
	padding-top: 0;
	width: 100%;
}

#nav-main .nav-main-menu a:hover {
	background-color: #FFFAD4;
}
#nav-main.hidden {
	display: none;
	visibility: hidden;
}
hr.view-controls {
	display: block;
}
}


/***
 * BODY STYLES - This is for the background image
 ***/
   html, body, #bg {
	height: 100%;
	width: 100%;
	background-color: #f2f2f2;
   }
   #bg {
       position:fixed; 
       left:0;
       right:0;
       bottom:0;
       top:0;
       overflow:hidden;
       z-index:0;
   }
   #bg img {
       width:100%;
	   height:100%;
       min-width:100%;
       min-height:100%;

   }
   #content {
       z-index:1;
   }


/***
 * FOOTER STYLES
 ***/
 footer {
	 background-color:#fff;
	 border-top:1px solid #999;font-size:12px;line-height:18px;padding-top:8px;padding-bottom:68px;
	 }
footer img {
  padding-right: 4px;	
	
}
.tiny_text {
font-size: 10px;	
}
@media screen and (max-width: 840px) {
footer > .content-container > .legal,
footer > .content-container > .address {
	position: static;
}
footer > .content-container > div {
	padding: 12px;
	width: 49%;
}
footer > .content-container > div:nth-child(3) {
	clear: left;
}
footer > .content-container > div:nth-child(3),
footer > .content-container > div:nth-child(4) {
	border-top: 1px dotted #999;
}
}

@media screen and (max-width: 640px) {
footer > .content-container > div {
	width: 99%;

}

footer > .content-container > div:nth-child(2) {
	border-top: 1px dotted #999;
}

footer > .content-container > .address {
	padding-top: 3px;
	padding-bottom: 64px;
	
}
}

/***
 * UTILITY CLASSES
 ***/

@media screen and (max-width: 840px) {
.resources .linklist .linklist-header {
	float: none;
	width: 100%;
}
.resources .linklist ul {
	width: 100%;
}
.subbucket {
	width: 49.5%; margin-top: 1%;
}
:nth-child(3).subbucket {
	clear: left; margin-left: 0px;
}
}

@media screen and (max-width: 640px) {
/*.resources .linklist ul li {
	float: none;
	margin-left: auto;
	width: 100%;
}*/
.subbucket {
	width: 100%; height: auto; margin-left: 0px;
}
.subbucket img {
	display: none;
}
.faculty_list_table img {
	display: none;
}
.picture img {
	display: none;
}

}

@media print {
.subbuckets {
	margin: 0px;
}
.subbucket .subbucket-header
{
	background:none !important;color:#444 !important;font-weight:bold !important;padding:0 !important
}
}


/* images */
.picture { background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.picture_right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.picture_left { margin: 0.5em 0.8em 0.5em 0; float:left; }
.picture_center { margin: 0.5em 0.8em 0.5em 0; float:center; }

/* Table Styles */

/* 
Generic Styling, for Desktops/Laptops 
*/

table { 
  width: 100%; 
  border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th  { 
  background: #ccc; 
  color: black; 
  font-weight: bold; 
}
caption  { 
  background: #fff; 
  color: black; 
  font-weight: bold; 
    padding: 4px; 
  border: 1px solid #ccc; 
  text-align: center; 
}
td, th  { 
  padding: 4px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
.faculty_list_table td, th {
	/* Remove border from faculty table */
	border-left: 0px;
	border-right: 0px;
	border-bottom: 1px solid #ccc;
	border-top: 0px;	  
	
}
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	caption { display:none;}
	

	/*
	Label the data for each responsive table
	*/
	
	.events_list_table td:nth-of-type(1):before { content: "Date"; font-weight: bold;}
	.events_list_table td:nth-of-type(2):before { content: "Time"; font-weight: bold;}		
	.events_list_table td:nth-of-type(3):before { content: "Dept"; font-weight: bold;}		
	.events_list_table td:nth-of-type(4):before { content: "Title"; font-weight: bold;}		
	
	.news_list_table td:nth-of-type(1):before { content: "Date"; font-weight: bold;}
	.news_list_table td:nth-of-type(2):before { content: "Time"; font-weight: bold;}		
	.news_list_table td:nth-of-type(3):before { content: "Program"; font-weight: bold;}		
	
	.faculty_list_table td:nth-of-type(1):before { content: "Name"; font-weight: bold;}
	.faculty_list_table td:nth-of-type(2):before { content: "Title/Interest"; font-weight: bold;}
	.faculty_list_table td:nth-of-type(3):before { content: "Email"; font-weight: bold;}	
	
	.faculty_list_table_4 td:nth-of-type(1):before { content: "Photo"; font-weight: bold;}
	.faculty_list_table_4 td:nth-of-type(2):before { content: "Name"; font-weight: bold;}
	.faculty_list_table_4 td:nth-of-type(3):before { content: "Title"; font-weight: bold;}	
	.faculty_list_table_4 td:nth-of-type(4):before { content: "Email"; font-weight: bold;}	
		
	.lecturer_list_table td:nth-of-type(1):before { content: "Photo"; font-weight: bold;}	
	.lecturer_list_table td:nth-of-type(2):before { content: "Name"; font-weight: bold;}
	.lecturer_list_table td:nth-of-type(3):before { content: "Title"; font-weight: bold;}
	.lecturer_list_table td:nth-of-type(4):before { content: "Email"; font-weight: bold;}		
	
	.staff_list_table td:nth-of-type(1):before { content: "Name"; font-weight: bold;}
	.staff_list_table td:nth-of-type(2):before { content: "Department"; font-weight: bold;}		
	.staff_list_table td:nth-of-type(3):before { content: "Title"; font-weight: bold;}		
	.staff_list_table td:nth-of-type(4):before { content: "Phone"; font-weight: bold;}				
	
	.acourses_table td:nth-of-type(1):before { content: "Course"; font-weight: bold;}
	.acourses_table td:nth-of-type(2):before { content: "Title"; font-weight: bold;}		
	
	.qcourses_table td:nth-of-type(1):before { content: "Course"; font-weight: bold;}
	.qcourses_table td:nth-of-type(2):before { content: "Title"; font-weight: bold;}	
	.qcourses_table td:nth-of-type(3):before { content: "Instructor"; font-weight: bold;}				

	.news_list_table td:nth-of-type(1):before { content: "Date"; font-weight: bold;}
	.news_list_table td:nth-of-type(2):before { content: "Time"; font-weight: bold;}		
	.news_list_table td:nth-of-type(3):before { content: "Program"; font-weight: bold;}	
				
	
}


.line-separator
{
height:1px;
/*background:#717171;*/
border-bottom:1px solid #999999;
margin-left: 25%;
margin-right: 25%;
padding-bottom: 5px;
padding-top: 5px;
}

.line-separator2
{
height:1px;
/*background:#717171;*/
border-bottom:1px solid #999999;
padding-bottom: 5px;
padding-top: 5px;
}

.line-separator3
{
height:1px;
/*background:#717171;*/
border-bottom:1px solid #999999;
margin-left: 0%;
margin-right: 5%;
margin-bottom: 9px;
padding-bottom: 5px;
padding-top: 5px;
}

.contrast_text {
	color: #990000;
}

	
.td_wrapper {
    display: table-cell;
    /*width: 200px;
    height: 150px;*/
    text-align: center;
    vertical-align: middle;

  }
 
  .td_inner {
    padding: 10px;
  }
  
  
  /* Spacer Image */
  
  .spacer_img {
	width:10px;
	height:10px;
	float:left;  
	padding:0px;
	margin:0px;
  }
  
  .button{
	color: #3c3c3c;
	display: inline-block;
	height: 30px;
	position: relative;
	padding-top: 2px;
	padding-right: 22px;
	padding-left: 22px;
	padding-bottom: 0;
	border-radius: 26px;
	border: 1px solid #d8d6d6;
	-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3);
	box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3);
	background: url('../images/link.png') repeat-x;
	text-align: center;
	font-weight: bold;
}

.ErrorText
{
	color: #C03336;
	font-weight: bold;
}