/* all the entries preceded with html>body are used only for none IE browsers because IE will simply 
ignore them. IE sucks. That's why I need to take care of it separately. */

html 		{ min-height: 100%; }

body {background: #000000 url(UCLA_GCG_2000c.gif) no-repeat;
      font-family: arial, sans-serif;}

#visible {position:absolute; margin-top: -10px;
	       margin-left: 450px;
	       width: 870px;
	       background:black;}

#header {float:right; 
				 width: 810px; height: 88px; 
				 background:Yellow;
				 border-bottom: 5px solid black;}
html>body #header {float:right; 
				 width: 810px; height: 80px; 
				 background:Yellow;
				 border-bottom: 5px solid black;}

#topleftbar {float:left; 
	         width:60px; height:85px; 
	         background:Purple; /*Yellow; */ 
	         border-bottom: 5px solid black; 
	         border-right: 9px solid black;
	         text-align:right;
	         }
html>body #topleftbar {float:left; 
	         width:51px; height:80px; 
	         background:Purple; /*Yellow; */ 
	         border-bottom: 5px solid black; 
	         border-right: 9px solid black;
	         text-align:right;
	         }
#topleftbar h1 {font-size:36px; margin-top:40px; padding:0; color:black; text-align:center;}

#wrapper {overflow:hidden; width:870px;}
 	         
#leftOuterBar {float:left; 
	       width:60px; 
	       background: Yellow; 
	       border-right: 9px solid black;
	       }
html>body #leftOuterBar {float:left; 
	       width:51px; 
	       background:Yellow;
	       border-right: 9px solid black;
	       }
#leftOuterBar h1 {position:relative;
									font-size:26px; 
									margin:0; padding:0; 
									color:black; 
									text-align:center;}

#topbar {width:710px; float:left; background:red; border-bottom: 7px solid black; }

html>body #topbar {width:710px; float:left; background:red; border-bottom: 7px solid black;}

#topbar h1 {font-size:36px; margin-left:40px; padding:0; color:black; text-align:left;}

#leftInnerBar {position:relative;
	             float:left; 
	             width:50px; background:green; 
	             border-right: 5px solid black;
	             }
html>body #leftInnerBar {position:relative;
	             float:left; 
	             width:45px; background:green; 
	             border-right: 5px solid black;
	             }
	             
/* central holds both photo sliding door and main content */	             
#central {position:relative; 
	        float:left; 
	        width:660px; 
	        background:white;
	        }
/* for main content */
#main {position: relative; float:left; 
	     width:660px; 
	     border-top: 5px solid black;
	     background:white; clear:both;
	     }
#main p {padding-left: 20px; 
	       padding-right:30px; 
	       text-align: justify;
	       font-size: 16px;
	       }     
	       
#main a {color:blue; text-decoration:none;}
#main a:hover {color:red; text-decoration:underscore;}

#main ul {display: block;
						 padding-right:100px;
						}
html>body #main ul {display: block;
	           padding-left:40px;
						 padding-right:100px;
						}
#main ul a {text-decoration:none;}

/*for right outer bar */
#rightOuterBar {position:relative;
	       float:right; 
	       width:100px; 
	       background:blue;
	       border-left: 5px solid black;
	       }
html>body #rightOuterBar {position:relative;
	       float:right; 
	       width:95px; 
	       background:blue;
	       border-left: 5px solid black;
	       }
	       
/* Line below is important to auto adjust the heights of the columns such that they can be equal*/	       
#leftOuterBar, #leftInnerBar, #central, #main, #rightOuterBar {padding-bottom:32767px; margin-bottom:-32767px;}


#footer {clear:both;  background:red; border-top: 7px solid black;}

#footer p {margin-top: 30px; 
	         padding: 30px;
	       text-align: center;
	       font-size: 16px;
	       }        
	       
h1 {font-size:20px; margin:0; padding:10px 0; color:#fff;}
h2 {font-size:18px; margin:0; padding:8px 0;}
.content {padding:10px;}

/*below is for creating tabs */
ul#tabs { list-style-type: none; 
					margin: 30px 0 0 0; 
					padding: 0 0 0.3em 0; 
				}
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; 
	             background-color: white; 
	             border: 1px solid #c9c3ba; 
	             border-bottom: none; 
	             padding: 0.3em; text-decoration: none; 
	             }
ul#tabs li a:hover { background-color: purple; color: black;}
ul#tabs li a.selected { color: #000; 
	                      background-color: white; 
	                      font-weight: bold; 
	                      padding: 0.3em 0.3em 0.38em 0.3em; 
	                      border: 1px solid purple; border-bottom: none; 
	                      }
div.tabContent { border: 1px solid purple; 
	               padding: 0.5em; 
	               background-color: white; 
	              }
div.tabContent.hide { display: none; }



/* Outer most wrapper 
#footer a {color:#fff;}
#footer a:hover {text-decoration:none;}

#wrapper { width:850px; 
	 				 position:absolute;   
	 				 margin: -15px 0 0 450px;
	 				 background: Yellow;
	       }
	 				
#welcome {position:relative;
	        margin: 0 0 0 0;
	        width: 60px;
	        height: 80px;
	        border-right: 9px solid black;
	        border-bottom: 5px solid black;
	        border-top:none;
	        border-left: none; clear: both;
	      }
#welcome h3 {font-family: arial; color: black; font-size: 20px;
	           padding-left: 35px;
	           text-align: center;
	           }

#container {position: relative;
	          width: 790;
	          min-height: 600px;
	          margin: -5px auto 0 60px;
	          background: red;
	          border-left: 9px solid black;    
	         border-top: 5px solid black;
	         border-bottom:none;
	         border-right: none;         
	        }
	              
#header  { position:relative; 
	         width:700px; height:50px; 
	         margin: 0;
	         background: blue;
	         text-align: center; clear: both;
	       }
       
#nav 	{ margin:0 auto 0 30px;
				display:block; 
	      width:750px; height:200px; 
	      border-left: 9px solid black;
	      border-bottom: 9px solid black;
	      padding:0; 
	      list-style:none; 
	      text-align:center; 
	     }

#content { width:730px; 
					 margin: 0 auto auto 30px;
					 min-height:300px; 
					 background-color: blue;
					 text-align:justify;  
					 font-family: arial,simSun;	
					 color: ForestGreen;	
					 border-left: 9px solid black;
					 border-top:none;
					 border-right:none;
					 border-bottom:none;		 
					}
#content a {text-decoration:underline;
						color: ForestGreen;
	         }
#content a:hover {color:#000000;
									background-color:ForestGreen;
								}
#content p {padding-left: 20px;
	          padding-right:100px;
	          text-align: justify;
	          font-size: 16px;
	         }        
#content ul {display: block;
	           padding-left:20px;
						 padding-right:100px;
						}
#content ul a {text-decoration:none;}
							         
#footer {margin-top:30px;
				 width: 750px;
				 height: 30px;
				 line-height:26px;
				 font-family:arial;
				 font-size:12px;
				 font-color:#000000;
				 background-color:GreenYellow;
				 text-align:center;
				 vertical-align:middle;
				} */