*
{
	/* Get rid of the margin and padding around html elements that the browser 
	automatically adds */
	margin : 0; 
	padding: 0; 
	/* Change the font from Times New Roman to Arial */
	font-family: Arial, Helvetica, sans-serif;
}
body
{
	background-color: #EBEBEB;
}
#container
{
   /* Keep the page readable on large screens and center it correctly. */
	width: 80%;
	max-width: 1100px;
	min-width: 0;
	position: relative;
	left: auto;
	margin: 0 auto;
	/* Adds the UCSD logo to the background. */
	background-image: url(ucsd_logo.png);
	/* Now prevent the image from repeating */
	background-repeat: no-repeat;
	/* This is the minimum height the container can be, just enough to show
	the logo in the background completely */
	min-height: 140px;
	background-color: white;
	
	/* Adds a drop shadow on the conatiner */
       -webkit-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.3);
       -moz-box-shadow:    0px 0px 16px rgba(50, 50, 50, 0.3);
        box-shadow:         0px 0px 16px rgba(50, 50, 50, 0.3);
	 
	clear: both;
	padding: 1.5em;
	float: none;
}
.heading
{
	/* Move the heading over so that it does not overlap with the logo in the 
	background */
	margin-left: 150px;
}
h1
{
   /* Move the title down so that it is vertically centered relative to the logo */
	margin-top: 30px;
}
.lastMod
{
	color: red; 
	font-weight: bolder;
	padding: 1em;
	float: right;
}
.clearer
{
   /* This keeps content from wrapping around floated elements */
	clear: both;
}
/**************************************************************************************
 *                          MENU STYLES 
 **************************************************************************************/
ul#nav
{
   /* The two navigation lists should read as one compact menu area. */
	margin-top: 0;
	/* Get rid of the bullets */
	list-style: none; 
	/* Make the menu take up the entire width of the container */
	width: 100%;
	/* Make the background a light grey color */
	background-color: #EFEFEF;
	/* Center the menu items */
	text-align: center;
	/* Add a 1px solid grey border to the top and the bottom of the menu */
	border-bottom: 1px solid #C8C8C8;
	border-top: 1px solid #C8C8C8;
}
/* Add the larger top gap only before the first navigation list. */
h2.heading + ul#nav
{
	margin-top: 55px;
}

ul#nav li
{
   /* Make the navigation horizontal instead of vertical */
	display: inline-block;
	padding: 1em;
	/* Add a divider between the list items */
	border-right: 1px dotted #C4C4C4;
}
ul#nav li a
{
	/* Remove the underline from the link */
	text-decoration: none;
	/* Make the link a dark gold */
	color: #736200;
	/* Make the link bold */
	font-weight: bold;
   text-shadow: 0 0 0.2em white;
}
ul#nav li a:hover
{
   /* When the user hovers over a menu item, make it change from gold to blue */
	color: Navy;
}
ul#nav li:last-child
{
   /* Get rid of the right border on the last menu item */
	border: none;
}
ul#nav li:hover
{
	background-color: #F4F4F4;
}
/**************************************************************************
 *           STYLES FOR INSTRUCTOR, TA, AND TUTOR INFORMATION
 **************************************************************************/
 #instructor1
 {
   /* Bring the instructor div below the floated elements */
	clear: both;
	padding: 1em;
	width: 30%;
	vertical-align: top;
	float: left;
 }

 #instructor
 {
	padding: 1em;
	width: 30%;
	vertical-align: top;
	float: left;
 }

 #title
 {
 	clear: both; 
 	padding: 1em;
	vertical-align: top;
	border-top: 1px solid #C4C4C4;
	border-bottom: 1px solid #C4C4C4;

 }



 #teachingAssistants
 {
 	padding: 1em;
	vertical-align: top;
	float: left;
	width: 30%;
 }


 #tutors
 {
 	padding: 1em;
	vertical-align: top;
	width: 30%;
	float: left;
 }


 .tableHeading
 {
 	font-weight: bold;
	background-color: #E0E0E0;
	padding: 5px;
 }
 table
 {
	width: 95%;
	margin-bottom: 1em;
	border-collapse: collapse;
 }
 table td
 {
 	padding: 5px;
	margin: 0;
	background-color: #EFEFEF;
	border: 1px solid;
	border-color: #CECECE;
 }
 table .label
 {
    background-color: #F2F2F2;
 }
 h3
 {
 	color: #0351A3;
 }
 
 #middle
 {
	/* Add a divider */
	border-top: 1px solid #C4C4C4;
	/*border-bottom: 1px solid #C4C4C4;*/
	padding: 1em;
	/*background-color: #E9E9E9;*/
	background-color: white
 }


 #separator
 {
	/* Add a divider */
	/*border-top: 1px solid #C4C4C4;*/
	border-bottom: 1px solid #C4C4C4;
	padding: 1em;
	/*background-color: #E9E9E9;*/
	background-color: white
 }



 #welcomeMsg
 {
 	margin-top: 1em;
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 2em;
	text-align: justify;
	line-height: 25px;
 }
 #announce
 {
 	margin: 1em;
	padding: 1em;
	background-color: #FFE02D;
	border: 1px solid;
	border-color: #BFA300;
	text-align: justify;
	line-height: 25px;
 }
 .mostRecent
 {
 	font-weight: bold;
 }
 .toTop
 {
 	float: right;
	padding: 1em;
 }
 #welcomeMsg h4
 {
 	display: inline-block;
 }
 #welcomeMsg h4 + p
 {
 	display: inline;
 }
 #welcomeMsg p
 {
 	margin-bottom: 1em;
 }
 
 #schedule
 {
 	padding: 1em;
 }
 #welcomeMsg ul
 {
 	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 3em;
 }
 #homework
 {
 		/* Add a divider */
	border-top: 1px solid #C4C4C4;
	border-bottom: 1px solid #C4C4C4;
	padding: 1em;
	/*background-color: #E9E9E9;*/
	background-color: white;
 }
 
 #middle ul
 {
 	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 3em;
 }

 #middle ol
 {
 	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 3em;
 }

 .tableHeading td
 {
 	background-color: #FFE551;
 }
 .bold
 {
 	font-weight: bold;
 }
 .odd td
 {
 	background-color: #D6D6D6;
 }
 .exam td
 {
 	background-color: #3F7FCF;
 }
 .white td
 {
 	background-color: #FFFFFF;
 }
 ul#footer
 {
 	clear: both;
	width: 100%;
	background-color: #0C5AA3;
	text-align: center;
 }
 ul#footer li
 {
 	display: inline-block;
	padding: 1em;
 }
 ul#footer a
 {
 	color: #FFD700;
	font-weight: bold;
	text-decoration: none;
	font-size: 11px;
 }
 ul#footer li
 {
 	border-right: 1px dotted; 
	border-color: #056CDA;
	
 }
 ul#footer li:first-child
 {
 	border-left: 1px dotted #056CDA;
 }
 ul#footer li:hover
 {
 	background-color: #0665CA;
 }

.new
{
   background-image: url("new.png");
   background-repeat: no-repeat;
   background-position: 20px;
}
.new a
{ 
   margin-left: 35px;
}

h8
{
  text-color: black;
  border: 3px solid #FFE551;
  font-weight: bold;
  display: inline; 
}

/**************************************************************************************
 *                    TYPOGRAPHY AND CONTENT SPACING
 **************************************************************************************/
#container p
{
	margin: 0 0 1.15em;
	line-height: 1.6;
}

#container h3
{
	margin: 2.25em 0 0.9em;
	padding-bottom: 0.2em;
	line-height: 1.25;
}

#container h4
{
	margin: 1.5em 0 0.55em;
	line-height: 1.3;
}

/* Restore indentation removed by the universal reset at the top of this file. */
#container ul:not(#nav):not(#footer),
#container ol
{
	margin: 0.4em 0 1.25em;
	padding-left: 2em;
}

#container ul:not(#nav):not(#footer) li,
#container ol li
{
	margin-bottom: 0.4em;
	line-height: 1.5;
}

#container ul:not(#nav):not(#footer) li:last-child,
#container ol li:last-child
{
	margin-bottom: 0;
}

#container table
{
	margin: 1em auto 1.5em;
}

/* Prevent the logo and fixed-width heading offset from breaking narrow screens. */
@media (max-width: 900px)
{
	body
	{
		background-color: white;
	}

	#container
	{
		width: 100%;
		padding: 1em;
		box-shadow: none;
	}

	.heading
	{
		margin-left: 150px;
	}
}

@media (max-width: 600px)
{
	#container
	{
		background-image: none;
	}

	.heading
	{
		margin-left: 0;
	}

	h1
	{
		margin-top: 0;
	}

	h2.heading + ul#nav
	{
		margin-top: 2em;
	}

	ul#nav li
	{
		display: block;
		border-right: none;
		border-bottom: 1px dotted #C4C4C4;
	}
}