/*******************************************************************************
*  Primary Layout Styles
*******************************************************************************/

/* This rule resets a core set of elements so that they will appear consistent across browsers. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 

* {
	margin: 0;
	padding: 0;
	}
	
	a, a:hover { 
	text-decoration: none;
	}

blockquote {
   margin-top: 0px;
   }
   
body {
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	color: #333333;
	background-color: #000000;/* This color and footer-outer need to be the same in order to have the footer position appear to be always at the bottom of the browser. */
	}
	
.skip {
	/* For accessibility: "skip to main content" link is not visible in standard browsers. It is for sight-impaired users who browse with text-reading devices */
	display: none;
	}
	
/**********************************************
*  TOP DIV-Jonns Hopkins portal, standard links
***********************************************/

	
#top-div-outer {
	background-color: #FFF;
	background-position: center;
	background-color: #000;
	margin-left: 0px;
	margin-right: 0px;
	}

#top-div-inner {
	width: 960px;
	font-size: 10px;
	margin: 0px auto;
	padding: 0px;
	height: 22px;
	}
	
#jhportal {
	float: left;
	padding-left: 24px;
	padding-top: 5px;
}

#jhportal a {
	color: #FFFFFF;
	text-decoration: none;
	display: inline;
	padding-left: 10px;
}
#jhportal a:visited {
	color: #FFFFFF;
}
#jhportal a:hover {
	text-decoration: underline;
}
#top-div-nav ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	
	}
#top-div-nav ul li {
	display: inline;
	}
	
#top-div-nav ul li a {
	padding: 5px 5px 5px 10px;
	margin: 0px;
	float: right;
	height: 11px;
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 9px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 9px;
}

#top-div-nav ul li a:hover{
	text-decoration: underline;
	}

/**********************************************
*  HEADER-JHU Logo, Site Title Graphic
***********************************************/
		
#header-outer {
   background-color: #000;
	background-position: center;
	}
#header-inner {
	width: 960px;
	margin: 0 auto;
	background-color: #FFFFFF;
	}
	
#header-logo img {
	width: 240px;
	float: left;
	display: inline;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	}
	
.logo {
	display: none;
	}/* For accessibility. */
	
#header-right img {
	float: left;
	display: inline;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width: 475px;
	}
	
/**********************************************
*  MAIN CONTENT AREA WITH NAVIGATION
***********************************************/	
	
#content-outer {
  
}
	
#content-inner {
	width: 960px;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
	background-image: url('img/bg-tl-cnt-69c-main-1.gif');
	background-repeat: repeat-y;
}
	

/******VERTICAL NAVIGATION FOR THIS SITE******/	
#vertical-menu h2 {
	/* For accessibility: title for aural reading devices. This H2 is not visible in modern browsers. */
	display: none;
	}

#vertical-menu {
	/* Creates the vertical menu column */
	float: left;
	display: inline;
	width: 240px;
	text-align: left;
	margin: 0px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	/* background-color: #6699CC; */
	}

#vertical-menu ul {
   margin-top: 0px;
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: normal;
	}		

#vertical-menu  a {
	display: block;
	width: 220px;
	background-color: transparent;
	padding-top: 6px;
	padding-right: 0px;
	padding-bottom: 6px;
	padding-left: 20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	margin-left: 0px;
	margin-top: 0px;
	}
   
#vertical-menu a:link, #vertical-menu a:visited {
	color: #FFFFFF;
	text-decoration: none;
	}
	
#vertical-menu  a:hover {
	background-color: #6f93af;
	color: #fff;
	background-image: url(/img/nav-ovr.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}

#vertical-menu-address {
	font-size: 12px;
	line-height: 1.3em;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #6699CC; 
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 25px;
	margin-top: -2px;
}


/**********SITE CONTENT AREA**********/	
#main-content-wrap {
	display: inline;
	text-align: left;
	width: 720px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	float: right;
	margin: 0px;
	padding: 0px;
	}
	
/**********Main content title**********/	
#main-content-title {
   float: left;
   height:30px; 
   width: 716px; 
   font-family: Arial, Helvetica, Verdana, sans-serif;
   margin-left: 2px; 
   margin-top: 0px; 
   background-color:#6699cc;
   padding-top: 5px; 
   padding-bottom: 5px;
   }

/**********Banner image area**********/	
#banner-image{
	display: inline;
	width: 720px;
	margin: 0px;
	}
	
/******Left column below banner area******/	
#middle-content {
	float: left;
	display: inline;
	width: auto;
	margin-left: 20px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	}
	
/******Right column below banner area******/	
		
#right-content {
	float: right;
	display: inline;
	text-align: left;
	width: 200px;
	background-color: transparent;
	}
	
	
/*******************************************************************************
*  2nd LEVEL LAYOUT OPTIONS FOR CONTENT AREA.
*******************************************************************************/

#content-inner-onecol {
	background-color: #ffffff;
	width: 960px;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
	background-image: url(color-options-tiles/ksas-blue/bg-tl-cnt.jpg);
	background-repeat: repeat-y;
}

#main-onecol-content {
	width: 650px;
	padding-top: 1em;
	padding-right: 0px;
	padding-bottom: 3em;
	padding-left: 20px;
	line-height: 1.6em;
	}

	
/**********************************************
*  FOOTER
***********************************************/

#footer-outer {
	background-color: #000000;/* This color and footer-outer need to be the same in order to have 
	                             the footer position always appear to be at the bottom of the browser. */
	width: 100%;
	}
#footer-inner {
	width: 930px;
	margin: 0 auto;
	color: #666666;
	line-height: 18px;
	font-size: 80%;
	text-align: center;
	padding: 15px 15px 15px 15px;
	}
#footer-inner h2 {
	/* For accessibility: title for aural reading devices. This H2 is not visible in modern browsers. */
	display: none;
	}
#footer-inner ul li {
	list-style: none;
	display: inline;
	margin-right: 10px;
	}
#footer-inner a {
	color: #dddddd;
	border-bottom: 1px solid #999999;
	padding-bottom: 2px;
	}
#footer-inner a:hover {
	color: #ffffff;
	border-bottom: 1px solid #f77f00;
	padding-bottom: 2px;
	}
/*******************************************************************************
*  Text styles by Div--these will go in separate CSS eventually.
*******************************************************************************/

/* middle column text styles */
#middle-content p {
	text-align: left;
	}
#middle-content h2 {
   font-size: 1.3em;
	margin-top: 1.666em;
	margin-right: 0em;
	margin-bottom: 1em;
	margin-left: 0em;
	/*
	font-size: 1em;
	line-height: 1.333em;
	margin: 1.666em 0em -0.333em 0em;
	font-weight: bold;
	*/
	}
#middle-content h1 {
	font-size: 1.7em;
	color: #1C3F6B;
	margin-top: 1em;
}
#middle-content h3 {
	font-size: 1em;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
	margin-left: 0em;
	}
#middle-content a {
	color: #0000FF;
	text-decoration: underline;
	}
#middle-content a:hover {
	color: #bf4d02;
	}
#middle-content ul {
	padding-left: 15px;
	margin-left: 15px;
	}
#middle-content ul li {
	list-style-type: square;
	font-size: 1em;
	line-height: 1.6em;
	padding-top: 6px;
	padding-bottom: 6px;
	}
#middle-content ol {
	padding-left: 15px;
	margin-left: 15px;
	}
#middle-content ol li {
	font-size: 1em;
	line-height: 1.6em;
	}
	
	
	
/* Right column text styles */	
#right-content p {
	font-size: 1em;
	line-height: 1.6em;
	margin-top: 0em;
	margin-right: 1em;
	margin-bottom: 0em;
	margin-left: 1em;
	}
#right-content h2 {
	font-size: 1.5em;
	line-height: 1.333em;
	color: #1c3f6b;
	font-weight: lighter;
	margin-top: 1.666em;
	margin-right: 1em;
	margin-bottom: -0.333em;
	margin-left: 1em;
	}
#right-content h3 {
	font-size: 1em;
	line-height: 1.6em;
	margin: 1em;
	color: #FFFFFF;
	font-weight: normal;
	background-color: #1c3f6b;
	text-align: center;
	}
#right-content a {
	color: #444444;
	text-decoration: underline;
	}
#right-content a:hover {
	color: #bf4d02;
	}
#right-content ul {
	padding-left: 15px;
	margin-left: 15px;
	}
#right-content ul li {
	list-style-type: square;
	font-size: 1em;
	line-height: 1em;
	}
#right-content ol {
	padding-left: 15px;
	margin-left: 15px;
	}
#right-content ol li {
	font-size: 1em;
	line-height: 1.6em;
	}
	
	
/* One column text styles */
#faculty-thmbs  {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
	margin-right: 30px;
}	
#main-onecol-content p {
	font-size: 1em;
	line-height: 1.6em;
	}
#main-onecol-content h2 {
	font-size: 1.6em;
	line-height: 1.6em;
	color: #1c3f6b;
	font-weight: bold;
	margin-top: 1em;
	margin-right: 0em;
	margin-left: 0em;
	}
#main-onecol-content h3 {
	font-size: 1em;
	line-height: 1.3em;
	color: #1c3f6b;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: -1em;
	margin-left: 0em;
	}
#main-onecol-content a {
	color: #444444;
	text-decoration: underline;
	}
#main-onecol-content {
	}
#main-onecol-content ul {
	padding-left: 15px;
	margin-left: 15px;
	}
#main-onecol-content ul li {
	list-style-type: square;
	font-size: 1em;
	line-height: 1.6em;
	}
#main-onecol-content ol {
	padding-left: 15px;
	margin-left: 15px;
	}
#main-onecol-content ol li {
	font-size: 1em;
	line-height: 1.6em;
	}

/* Classes to apply to any graphic or photo */	

.border-photo {
	padding: 3px;
	border: 1px solid #C2C2AF;
	}
.right-float-photo {
	padding: 1px;
	border: 1px solid #C2C2AF;
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 5px;
	}
.left-float-photo {
	padding: 3px;
	border: 1px solid #C2C2AF;
	float: left;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	}
	
.center-photo {
	border: 1px solid #C2C2AF;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	}
	
.border-photo {
	padding: 3px;
	border: 1px solid #C2C2AF;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 15px;
	margin-left: 5px;
	}
.news-item {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	padding-bottom: 6px;
}
#main-onecol-content h1 {
	font-size: 2em;
	line-height: 1.6em;
	color: #1c3f6b;
	font-weight: bold;
	margin-top: 1em;
	margin-right: 0em;
	margin-left: 0em;
}

