/* to keep font size from expanding when faculty pages are rotated on iphones */
html {
	-webkit-text-size-adjust: 100%;
	}

body {
	font-family: Verdana,Geneva,sans-serif;
	-webkit-font-smoothing: antialiased; /* for safari/iphone/ipad */
	text-rendering: optimizeLegibility; /* for IE */
	margin: 0;
	background: #fff;
	}


.accessibility{
	position: absolute;
	left: -99999px;
	height: 10px;
	width: 10px;
}

#skip{
    	position: absolute;
	left: 0;
	top: 0;
        margin-left: 0;
	text-align: center;
	list-style: outside none;
}

#skip li{ list-style-type: none }

#skip a{
	position: absolute;
	left: -99999px;
	top: 30px;
}

#skip a:focus, #skip a:active{
	position: relative;
	left: 0;
	z-index:9999;
	width: 75%;
	height: auto;
	margin: 0 auto;
	padding: 30px 45px;
	text-align: center;
	text-decoration: none;
	letter-spacing: -4px !important;
	font: bold 50px "Arial", "Freesans", sans-serif !important;
	/* color information, edit this to suit the colors of your layout */
        color: #AEAEFE;
	background: transparent url(transparent.png) repeat scroll 0 0;
	border: 1px dotted #ffb4db;
}


.clear	{
	clear: both;
	}

#header a {
	text-decoration: none;
	outline: 0;
   }

#bannerbackground {
        background-image: url(/Includes/Images/banner.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	background-color: #003262;
	height: 80px;
	}


/* set height for banner */
@media only screen and (max-width: 880px) {
      #bannerbackground{
           height: 75px;
      }
}

/* straight edge */
#banner0background {
        background-image: url(/Includes/Images-test/bannerback0.jpg);
        background-repeat: no-repeat;
        background-position: top left;
        background-color: #003262;
        height: 80px;
        }
@media only screen and (max-width: 800px) {
      #banner0background{
           height: 70px;
      }
}

/* no image */
#banner0background {
        background-repeat: no-repeat;
        background-position: top left;
        background-color: #fff;
        height: 80px;
        }
@media only screen and (max-width: 800px) {
      #banner0background{
           height: 70px;
      }
}


#logo {
	width: 301px;
	height: 70px;
	padding: .3em 0 0 .4em;
        position: absolute;
	background-position: top left;
	}

/* ensure that full logo can be veiwed on small screens */
@media only screen and (max-width: 520px) {
      #logo{
           float:left;
	   max-width: 300px;
      }
}

#logo-top {
	position: absolute;
	border: 0;
	padding: 0;
	margin: 0;
}

#logo-berkeley {
	position: absolute;
	float: left;
	}

#logo-eecs {
	position: absolute;
	border: 0;
	padding: 0;
	margin: 0 0 0 175px;
	}

#logo-bottom {
	position: absolute;
	border: 0;
	padding: 0;
	margin-top: 52px;
	}

#extras {
	height: 80px;
	display: inline-block;
	float: right;
	}

/* allow search and give buttons to move to the left when screen collapses */
@media only screen and (max-width: 550px) {
      #extras{
           float:left;
	   margin-top: 81px;
	   margin-bottom: 0;
	   height: auto;
      }
 }

.screenreader {position: absolute; top:0; left:-9999px; color: #fff;}


#give {
	display:inline;
	margin: 1px .5em;
	float: right;
	font-size: .85em;
  	background-color: #00b0da;
  	background-image: -webkit-linear-gradient(top, #46acc5, #38816e);
  	background-image: -moz-linear-gradient(top, #46acc5, #38816e);
 	background-image: -ms-linear-gradient(top, #46acc5, #38816e);
 	background-image: -o-linear-gradient(top, #46acc5, #38816e);
 	background-image: linear-gradient(to bottom, #46acc5, #38816e);
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
 	border-radius: 2px;
 	text-decoration: none;
 	padding: .286em 1.143em;
 	color: #000;
 	}

#give:hover {
background-color: #e09e19;
 	background-image: -webkit-linear-gradient(top, #e4a629, #e09e19);
 	background-image: -moz-linear-gradient(top, #e4a629, #e09e19);
	background-image: -ms-linear-gradient(top, #e4a629, #e09e19);
	background-image: -o-linear-gradient(top, #e4a629, #e09e19);
  	background-image: linear-gradient(to bottom, #e4a629, #e09e19);
  	text-decoration: none;
   	}

#give a:hover {
	text-decoration: none;
	outline: 0;
   	color: #000;
   }

#give a:active {
   	color: #000;
	text-decoration: none;
	outline: 0;
   }


#give a {
	text-decoration: none;
	outline: 0;
	color: #000;
	}

#give a:link {
	text-decoration: none;
	outline: 0;
	color: #000;
	}

#give a:visited {
	text-decoration: none;
	outline: 0;
	color: #000;
	}


/* Hide Give button on small screens */
@media only screen and (max-width: 550px) {
      #give{
    	display: none;
	visibility: hidden;
      }
 }



#search {
	padding: .5em .35em .4em .35em;
	}

/* when search drops down into nav block */
@media only screen and (max-width: 550px) {
      #search{
	padding-left: 1em; 
      }
 }


#navbar {
        background: #003262;
        width: 100%;
	color: #fff;
	line-height: normal;
}



#footerbackground {
	background-color: #003262;
	background-repeat: no-repeat;
	background-position: bottom center;
	}

#footer {
  	text-align: left;
	text-align: center;
	color: #fff;
	padding: .75em;
	}	

#footer a {
	text-decoration: none;
	outline: 0;
	color: #fff;
	}

#footer a:link {
	text-decoration: none;
	outline: 0;
	color: #fff;
	}

#footer a:visited {
	text-decoration: none;
	outline: 0;
	color: #fff;
	}

#footer a:hover {
	text-decoration: none;
	outline: 0;
	color: #fdb515;
	}

#footer a:active {
	text-decoration: none;
	outline: 0;
	color: #fff;
	}

#navinternal {
	float: right;
	width: 8em;
  	text-align: left;
}
/* Hide on medium screens */
@media only screen and (max-width: 880px) {
	#navinternal {
    	     display: none;
	     visibility: collapse;
	     float: none;
	}
}

/* Hide on small screens */
@media only screen and (max-width: 600px) {
      #navinternal{
           display: none;
           visibility: collapse;
           float: none;
      }
}

#navinternal > ul {
  	width: auto;
  	list-style-type: none;
  	padding: 0;
  	margin: 0;
  	background: #003262;
  	border-top: 2px solid #775717;
  	-webkit-border-radius: 2px;
  	-moz-border-radius: 2px;
  	-o-border-radius: 2px;
  	border-radius: 2px;
	}

  /* Hide on large screens */
#navinternal > ul li#responsive-menu {
  	display: none;
	}
#navinternal > ul li#responsive-col1 {
  	display: none;
	}
#navinternal > ul li#responsive-col2 {
  	display: none;
	}
#navinternal > ul li#responsive-col3 {
  	display: none;
	}
#navinternal > ul li#responsive-col4 {
  	display: none;
	}

  /* Hide on large screens */
#navinternal > ul li#responsive-tab {
 	 display: none;
	}
#navinternal > ul li {
  	display: inline-block;
 	 *display: inline;
 	 zoom: 1;
  	font-size: initial; /* to override Miyoko's font-size specs in Chrome & Firefox */
  	font-size: 100%; /* in IE */
	}

#navinternal > ul li.has-sub {
 	 position: relative;
 	 z-index: 1;
	}

#navinternal > ul li.has-sub:hover ul {
 	 display: block;
	}
#navinternal > ul li.has-sub ul {
  	display: none;
  	position: absolute;
  	margin: 0;
  	padding: 0;
  	list-style-type: none;
  	background: #003262;
  	border-top: 1px solid #775717;
  	border-right: 1px solid #003062;
  	border-left: 1px solid #003062;
  	border-bottom: 3px solid #d9ced2;
  	border-top: 0 none;
	}
#navinternal > ul li.has-sub ul li {
  	display: block;
	}
#navinternal > ul li.has-sub > a {
  	background-position: 90% -95%;
	}
#navinternal > ul li.has-sub > a.active,
#navinternal > ul li.has-sub > a:hover {
  	background-color: #002141;
  	background-position: 90% 195%;
	}
#navinternal > ul li.right {
 	float: right;
  	background: #003262;
	}

#navinternal > ul li.right:hover ul {
  	display: block;
	}

#navinternal > ul li.right ul {
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #003262;
  border: 1px solid #003062;
  border-bottom: 3px solid #d9ced2;
  border-top: 0 none;
}
#navinternal > ul li.right ul li {
  display: block;
  text-transform: none;
}
#navinternal > ul li.right > a {
  background-position: 90% -95%;
  text-decoration: none;
	outline: 0;
}
#navinternal > ul li.right > a.active,
#navinternal > ul li.right > a:hover {
  background-color: #002141;
  background-position: 90% 195%;
}

#navinternal > ul li a {
  display: block;
  padding: .692em 1.2em .615em 1.2em;
  text-decoration: none;
  color: #fff;
}
#navinternal > ul li a.active,
#navinternal > ul li a:hover {
  background: #002141;
  color: #fdb515;
}


/* from Cherry Responsive */
/* http://cssmenumaker.com/menu/cherry-responsive-menu */

#navmenu {
  text-align: left;
}
#navmenu > ul {
  width: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: #003262;
  border-bottom: 2px solid #775717;
  border-top: 2px solid #775717;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}

  /* Hide on large screens */
#navmenu > ul li#responsive-menu {
  display: none;
}
#navmenu > ul li#responsive-col1 {
  display: none;
}
#navmenu > ul li#responsive-col2 {
  display: none;
}
#navmenu > ul li#responsive-col3 {
  display: none;
}
#navmenu > ul li#responsive-col4 {
  display: none;
}

  /* Hide on large screens */
#navmenu > ul li#responsive-tab {
  display: none;
}
#navmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  font-size: initial; /* to override Miyoko's font-size specs in Chrome & Firefox */
  font-size: 100%; /* in IE */
	}
}

#navmenu > ul li.has-sub {
  position: relative;
  z-index: 1;
}

#navmenu > ul li.has-sub:hover ul {
  display: block;
}
#navmenu > ul li.has-sub ul {
  display: none;
  width: 15.625em;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #003262;
  border-top: 1px solid #775717;
  border-right: 1px solid #003062;
  border-left: 1px solid #003062;
  border-bottom: 3px solid #d9ced2;
  border-top: 0 none;
}
#navmenu > ul li.has-sub ul li {
  display: block;
}
#navmenu > ul li.has-sub > a {
  background-position: 90% -95%;
}
#navmenu > ul li.has-sub > a.active,
#navmenu > ul li.has-sub > a:hover {
  background-color: #002141;
  background-position: 90% 195%;
}

#navmenu > ul li a {
  display: block;
  padding: .692em 1.2em .615em 1.2em;
  text-decoration: none;
  color: #fff;
}
#navmenu > ul li a.active,
#navmenu > ul li a:hover {
  background: #002141;
  color: #fdb515;
}

.caret {
	display:inline-block;
        width:0;
	height:0;
	margin-left:2px;
	vertical-align:middle;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
	border-top:4px solid;
	/*
	transform: rotate(90);
	*/
	}

@media (max-width: 880px) {
  #navmenu > ul {
    width: 100%;
    display: inline;
  }
  #navmenu ul {
    line-height: normal;
  }
  #firstline {
    width: 100%;
  }
  #secondline {
    width: 100%;
  }
  #navmenu > ul li#responsive-menu {
    display: inline-block;
  }
  #navmenu > ul li#responsive-col1 {
    display: inline-block;
    width: 15%;
    padding: 0;
  }
  #navmenu > ul li#responsive-col2 {
    display: inline-block;
    width: 30%;
    padding: 0;
  }
  #navmenu > ul li#responsive-col3 {
    display: inline-block;
    width: 20%;
    padding: 0;
  }
  #navmenu > ul li#responsive-col4 {
    display: inline-block;
    width: 20%;
  }
  #navmenu > ul li#responsive-menu a {
    color: #fff;
    background: #003262;
  }
  #navmenu > ul li#responsive-col1 a {
    color: #fff;
    background: #003262;
    padding: .2em .25em .25em 1em;
  }
  #navmenu > ul li#responsive-col2 a {
    color: #fff;
    background: #003262;
    padding: .2em .25em;
  }
  #navmenu > ul li#responsive-col3 a {
    color: #fff;
    background: #003262;
    padding: .2em .25em;
  }
  #navmenu > ul li#responsive-col4 a {
    color: #fff;
    background: #003262;
    padding: .2em .25em;
  }
  #navmenu > ul li#responsive-menu a:hover {
    color: #fdb515;
    background: #002141;
  }
  #navmenu > ul li#responsive-col1 a:hover {
    color: #fdb515;
    background: #002141;
  }
  #navmenu > ul li#responsive-col2 a:hover {
    color: #fdb515;
    background: #002141;
  }
  #navmenu > ul li#responsive-col3 a:hover {
    color: #fdb515;
    background: #002141;
  }
  #navmenu > ul li#responsive-col4 a:hover {
    	color: #fdb515;
    	background: #002141;
  	}
  #navmenu > ul li {
    	display: none;
  	}
}

@media (max-width: 600px) {
  #navmenu > ul {
    	width: 100%;
    	padding-bottom: .5em;
  	}
  /* Hide on small screens */
  #navmenu > ul li#responsive-menu {
  	display: none;
	}
  #navmenu > ul li#responsive-col1 {
  	display: none;
	}
  #navmenu > ul li#responsive-col2 {
  	display: none;
	}
  #navmenu > ul li#responsive-col3 {
  	display: none;
	}
  #navmenu > ul li#responsive-col4 {
  	display: none;
	}
  #navmenu > ul li#responsive-tab {
    	display: block;
  	}
  #navmenu > ul li#responsive-tab a {
    	background: url('Images/menu.png') no-repeat;
    	background-position: 95% -35%;
  	}
  #navmenu > ul li#responsive-tab a:hover {
    	background-color: #002141;
    	background-position: 95% -40%;
    	color: #fdb515;
  	}
  #navmenu > ul li {
    	display: none;
  	}
  #navmenu > ul li.right {
    	float: none;
  	}
  #navmenu > ul li.has-sub {
    	position: relative;
  	}
  #navmenu > ul li.has-sub ul {
    	display: block;
    	position: static;
    	width: 100%;
    	background: #fff;
    	border: 0 none;
  	}
  	#navmenu > ul li.has-sub ul li {
    	display: block !important;
  	}
  #navmenu > ul li.has-sub ul li a span {
    	display: block;
    	padding-left: 24px;
  	}
  #navmenu > ul li.has-sub > a {
    	background-image: none;
  	}
}
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) {
  #navmenu > ul > li.collapsed {
    	display: inline-block !important;
    	*display: inline;
    	zoom: 1;
  	}
  #navmenu > ul ul li.collapsed {
    	display: block !important;
  	}
}


#divider-top {
	background: #e09e19;
	padding: .04em;
}

#divider-bottom {
	background: #e09e19;
	padding: .06em;
}

#content {
	padding: 0 1em 1em 1em;
	margin: .5em 2em 1em 2em;
	color: #000;
	}

#content p, ul, ol, table {
	line-height: 1.3em;
	}
#content p {
	margin-top: .25em;
}

#content ul p {
	margin-top: .25em;
	}

#content h1, #facultypage h1 {
	border-bottom: .06em #e09e19 solid;
	margin-bottom: .2em;
	line-height: normal;
}

#content h2 {
    	margin: 1.2em 0 .2em 0;
	border-bottom: .06em #c2b9a7 solid;
	line-height: normal;
}

#content h2.top {
    	margin: .25em .25em .2em 0;
    	padding: 0;
}


#content h2.special {
	color: #2d637f;
}

#content h3 {
	padding: 0;
	margin: 1.2em 0 .3em 0;
	line-height: normal;
        }

#content h3.special {
	color: #2d637f;
}

#content h4 {
	padding: .2em 0 0 0;
	margin: 1.25em 0 .1em 0;
	line-height: normal;
        }

#content h4.special {
	color: #2d637f;
}

#content a {
        text-decoration: none;
        outline: 0;
        }

#content a:link, #facultypage a:link {
        text-decoration: none;
        }

#content a:visited, #facultypage a:visited {
        text-decoration: none;
        color: #000099;
        }
#content a:hover, #facultypage a:hover {
        text-decoration: underline;
        color: #0295b8;
        }

#content a:active, #facultypage a:active {
        color: #ed4e33;
        text-decoration: underline;
        }

#content a[target="_blank"]:after {
    content: url(/Includes/Images/link-external.png);
        }