body {
    font-family:Arial;
    font-size: 11pt;
    background-color:#CCC;
    color:#333;
    line-height:18px;
	height: 100%;
    background: url('my-page-bg.jpg') no-repeat fixed center top #DBDBDB;
	margin:15px 0px;
	background-size: cover;
}

@media screen and (min-width: 768px) {
   #main{
	  width:1000px !important;
  }
  
  .menu ul li{
		float: left;
	}
	
	#nav>ul{
		display: block !important;
	}
	.menu-icon{
		display: none;
	}
	
	
	#tbl-projects td:nth-child(4){
		display: table-cell;	
	}
	#tbl-projects td:nth-child(3){
		display: table-cell;	
	}

	#tbl-students td:nth-child(5){
		display: table-cell;	
	}
	#tbl-students td:nth-child(4){
		display: table-cell;	
	}
	
	.small-size{
		height: auto;
	}

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {  
  #main{
	  width:100% !important	;
  }
	
	
    .menu>ul {
		float: none !important;			
	}
  
  .menu>ul>li{
		float: none !important;
		background-color: #666;	
		
	}

	.menu-icon{
		display: block;
		float: right;
		right: 10px;
		top: 2px;
		position: relative;
		z-index: 2000;	
	}
	
	#nav{
				
		z-index: 1000;
	}	
	
	#summary{
		float: left;	
	}	
	
	.menu ul ul{		
		display: none !important;		
	}
	
	#lab #lab-name{
		font-size:16px !important;	
	}

	#lab #dept{
		font-size:11px !important;	 
	}

	#lab #uni{
    font-size:11px !important;	

	}	
	
	
	#tbl-projects td:nth-child(4){
		display: none;	
	}
	#tbl-projects td:nth-child(3){
		display: none;	
	}

	#tbl-students td:nth-child(5){
		display: none;	
	}
	#tbl-students td:nth-child(4){
		display: none;	
	}
	.small-size{
		height: 220px !important;
	}
	
}

.row::after {
  content: "";
  clear: both;
  display: table;
}
	
* {
		box-sizing: border-box;
}


#main{
    margin:0px auto;
    width:1000px;
    background-color:#FFF;	
    border-radius: 5px;
    border: 5px solid rgba(0,0,0,0.3);
    -moz-background-clip: border;
    -webkit-background-clip: border;
    background-clip: border-box;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    -moz-background-clip: content;
    -webkit-background-clip: content;
    background-clip: content-box;
}
#lab{
    height:136px;
    background-color:#FFF;
}
#lab #lab-name{
    font-size:20px;
    font-weight:bold;
    display:block;
    padding:5px;
    padding-top:20px;
	color: #000080
}

#lab #dept{
    font-size:16px;
    font-weight:bold;
    display:block;
    padding:5px;
	color: #006600;
}

#lab #uni{
    font-size:14px;
    font-weight:bold;
    display:block;
    padding:5px;
	color: #006600;

}
#lab a{
	text-decoration: none;
}
#logo img{
    height:100px;
    width:120px;
    float:left;
   margin:10px;
    
}
#header{
    max-height:400px;
    padding:20px 10px 5px 20px;
}

#avatar{
    max-width:100%;   
	max-height:400px;
    float:left;
    margin-right:20px;
}
#avatar img{
    width:100%;    
	max-width:400px;
    height:auto;
}
#fullname{
    display:block;
    font-size:24px;
    font-weight:bold;
	line-height: 30px;
}
#contact{
    display:block;
    line-height:24px;
}

#content{
    min-height:400px;
    padding:0px 20px;
    text-align:justify;
}
h1{
    font-size:14pt;
    font-weight:bold;
    padding:10px 0px 0px 0px;

}

#footer{
    height:30px;
    background-color:#CCC;
    text-align:center;
    padding-top:20px;
	padding-bottom:40px;
}
ul{
    padding-left:20px;
}

li{
    padding:10px;
    margin-left:20px;
    padding-bottom:15px;
    
}
.year{
    font-size:13pt;
    font-weight:bold;
    
}
p{
    padding-left:20px;
}

.menu{
   width: 100%;
   height: 36px;
   background-color: #666;
}

.menu ul{
	margin: 0px;
	padding: 0px;
	height: 36px;
}

.menu ul li{
  float: left;
  list-style: none;
 padding: 0px 0px;   
 margin: 0px;
 height: 36px;
 line-height: 36px;
 padding: 0px 10px; 
 position: relative;
}
.menu ul li a{
    color: #FFF;
    text-decoration: none;
    height: 36px;   
    display: block;    
    font-weight: bold;
    white-space: nowrap;
    margin: 0px;
    padding: 0px 10px;   
}

.menu ul ul{
   display: none;  
   position: absolute;
   top: 36px;
   margin: 0px;
}
.menu ul li:hover ul{
   display: block; 
   float: none;
   
}
.menu ul ul{
  width: 200px;  
  background-color: #CCC;
}
.menu li li{
	width: 200px; 
	line-height: 36px;  
	padding:0px;
	border-bottom: 1px solid #DDD;
}

.menu li li a{
	padding:0px 10px;
	background-color: #CCC;
	color: #333;
	
}

.menu ul li a:hover{
   background-color: #006600;
   display: block;
   color: #FFF;
}

table, td, th, tr {
    border-color: #cccccc;
}
td, th{
  border-bottom: 1px solid gray;
  border-left: 1px solid gray;
  text-align: left;
}

table{
border-top: 1px solid gray;
border-right: 1px solid gray;
margin: 20px 30px;
}
#teaching ul ul, ul li, li li{
	line-height: 28px;
	padding: 0px;	
}