/***********************************************************************************************

UNIVERSITY OF MIAMI VISUAL IDENTITY GUIDELINES COMPANION CSS DOCUMENT v1.0


This document is based on the University's original CSS document that was devised for use with the University's CMS. We've copied the terminology and structure as best we could so that this document can be cross-referenced with materials that change on the CMS as necessary. There are, of course, definitions that have been added, changed, and/or removed. For questions on this document or assistance, e-mail umcommunications@miami.edu. (Last Updated June 1, 2009)

	1. GENERAL PAGE STYLES
	
	2. HEADER STYLES
		2.1	Header Container
		2.2	Tactical Navigations and Search
		2.3 Logo/Signature
		2.4 Main Horizontal Navigation
	
	3. BODY-AREA STYLES
		3.1 Body Containers for Single- and Two-Column Layouts
		3.2 Right Column Styles
		3.3 Header Options for Body
		3.4 Related Links Header
		3.5 Breadcrumbs
		3.6 Green Bar Page Header 
		3.7 Table Style with Horizontal Rule
		3.8 Images
		3.9 Mission Statement Area
			
	4. FOOTER STYLES
			
			
***********************************************************************************************/


/* 1. GENERAL PAGE STYLES
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

/* Global reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td { 
	margin: 0; 
	padding: 0; 
	border: 0; 
	outline: 0; 
	font-weight: inherit; 
	font-style: inherit; 
	font-size: 100%; 
	font-family: inherit; 
	vertical-align: baseline; 
	}

body {
	line-height: 1em;  
	background: #7B9A70;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%; /* 1em = 10px \ 1.1em = 11px \ 1.2em = 12px */
}	

input, textarea, select {
	font-family: Helvetica, Arial, Helvetica, sans-serif;
}

a:link, a:visited, a:active {
	color: #b25614; 
	background: inherit;
	text-decoration: underline;
	}
	
ol, ul {
	list-style: none; 
	}
	
strong {
	font-weight: bold; 
	}
		
em {
	font-style: italic; 
	}
	
abbr, acronym {
	border-bottom: 1px dotted #ffffff; 
	cursor: help;
	}

.hide {
	position: absolute;
	left: -9999px;
}

.clear { 
	clear: both; 
	font-size: 0; 
	height: 0; 
	line-height: 0; 
	position: relative; 
} 

/* clearfix */
.clearfix:after,
.in-focus li:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/ 
* html .clearfix {
	height: 1%; 
}

.clearfix {
	display: block; 
}
/* End hide from IE-mac */

/* 2. HEADER STYLES
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

div.header, div.footer, div.content { 
	width: 960px;
	height:100%; 
	}

/* 2.1	Header Container
-----------------------------------------------------------------------------------------------*/	

div.header-wrap { 
	background: url(css_images/bg_header.png) 0 0 repeat-x;
	}

div.header { 
	background: url(css_images/bg_header2.png) 0 0 repeat-x; 
	height: 128px; 
	overflow: hidden; 
	position: relative; 
	} 
	
div.header li {	
	float: left; 
	}

div.header li a { 
	display: block; 
	position: relative; 
	}

/* 2.2	Tactical Navigation and Search
-----------------------------------------------------------------------------------------------*/	

div.top-menu { 
	position: absolute;
	} 

div.top-menu fieldset span { 
	position:relative;
	top:-3px;
	}

div.top-menu {
	position:absolute;
	background: #D7B369;
	height: 30px;
	top: 0;
	right: -4px; 
	}

div.top-menu ul { 
	margin: 6px 0 0 5px;
	}

div.top-menu li form, div.top-menu li form p { 
	float: left; 
	color: #fff; 
	}
	
div.top-menu .text-input { 
	border: 1px solid #C0A161; 
	color: #666; 
	height: 12px; 
	padding: 2px; 
	font-size: 1em;
	}
	
div.top-menu .submit-btn {
	padding: 0 0 0 5px;
	position:relative;
	top:-2px
	}
	
div.top-menu li, div.top-menu li a { 
	color: #fff; 
	text-decoration: none;
	}

div.top-menu li a { 
	display: inline; 
	font-weight: bold; 
	font-size: 1.1em; 
	}

div.top-menu span.separation { 
	color: #ecdbb7; 
	padding: 0  10px; 
	line-height: 1.5em; 
	font-size: 1.3em; 
	}

div.top-menu li span.separation.last-item { 
	padding: 0; 
	}


/* 2.3	Logo/Signature Area.
-----------------------------------------------------------------------------------------------*/

div.logo { 
	width: 220px; 
	position: relative; 
	}
	
div.logo h1, div.logo h1 a, div.logo h1 a span { 
	display: block; 
	width: 500px; 
	height: 97px; 
	overflow: hidden; 
	}

div.logo h1 { 
	position: absolute; 
	}
	
div.logo h1 a { 
	background: transparent; 
	color: #ffffff; 
	font-size: 1.5em; 
	line-height: 1.2em; 
	text-decoration: none;
	}
	
div.logo h1 a span { 
	position: absolute; 
	cursor: pointer; 
	top: 0; 
	left: 0; 
	z-index: 10; 
	background: url(css_images/logo2.png) no-repeat;
	}

/* 2.4	Main, Horizontal Navigation.
-----------------------------------------------------------------------------------------------*/

div.text-menu li a { 
	height: auto; 
	overflow: visible;
	text-transform:capitalize;
	text-decoration:none !important;
	font-weight:bold;
	}

div.main-menu { 
	bottom: 10px; 
	left: 40px;
	position: absolute;
	list-style-image: url('css_images/bullet.gif');
	}

div.main-menu li { 
	margin-right: 20px; 
	}

div.main-menu li a { 
	color: #fee9aa!important; 
	text-transform: uppercase; 
	height: 9px; 
	overflow: hidden; 
	font-size: 11px; 
	text-decoration: none; 
	}

div.text-menu li a { 
	height: auto; 
	overflow: visible; 
	}
	
div.main-menu li a:hover { 
	color: #7c4014; 
	}

div.main-menu li a span { 
	position: absolute; 
	top: 0; 
	left: 0; 
	display: block; 
	height: 9px; 
	background-repeat: no-repeat; 
	background-position: top!important;
	}

div.main-menu li a:hover span, div.main-menu li a.active span{ 
	background-position: bottom !important
	}
	
/* 3. BODY/AREA STYLES
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 3.1	Body Container Styles for Single- and Two-Column Layouts.
-----------------------------------------------------------------------------------------------*/	

div.content-wrap { 
	background: #D9E0BF; 
	border-bottom: 1px solid #fff;}
	
div.content { 
	position: relative; 
	min-height: 350px; 
	}
	
div.left-col p { 
	line-height:1.4em !important; 
	} 
	
.left-col { 
	width: 240px; 
	float: left; 
	min-height: 300px; 
	background-color: #D9E0BF !important;
	margin-bottom:10px
	}
	
.left-col h4 { 
	color: #B25614; 
	font-size: 13px; 
	margin: 10px 0 5px 40px;
	}

.left-col p {
	margin: 5px 0 5px 40px;
	width: 158px;
	}


.main-col img, .main-col-wide img { 
	/* Knocking this out so images on United Way site don't have outline
	border: 1px solid #b2c29b*/
	}
	
.main-col { 
	float: left; 
	padding: 40px 40px 70px 40px; 
	width: 400px; 
	background-color: #E9EBC6; 
	min-height: 450px; 
	font-size: 12px; 
	line-height: 20px;
	height:100%;
	}

.main-col-wide { 
	float: left; 
	padding: 40px 40px 70px 40px; 
	width: 640px; 
	background-color: #E9EBC6; 
	min-height: 450px; 
	font-size: 12px; 
	line-height: 20px;
	height:100%;
	}

.main-col li, .main-col-wide li {
	list-style: disc; 
	}

.insetBox {
	border:1px solid #7b9a70; 
	background-color:#FFFFDD; 
	margin:15px 25px 15px 25px; 
	padding:15px;
	}
	
.itemBox {
	padding:5px; 
	width:45%; 
	float:left; 
	margin-right: 8px; 
	background-color:#f1f3d5; 
	border:2px solid #E9EBC6;
	} 

.itemBox a:hover{
	border:1px dotted #7b9a70
	}

/* 3.2	Right Column Materials.
-----------------------------------------------------------------------------------------------*/	

.right-col .related ul { 
	color: #7a916a; 
	}

.right-col { 
	width: 240px; 
	float: left; 
	background-color: #D9E0BF!important; 
	min-height: 350px; 
	}

.right-col ul li { 
	font-size: 14px; 
	line-height: 18px; 
	list-style-image: url('css_images/list.png'); 
	margin-bottom: 6px;
	margin:10px 10 10px 26px;
	}
	
.right-col ul li ul { 
	font-size: 14px; 
	line-height: 18px; 
	list-style-image: url('css_images/list.png'); 
	margin-bottom: 6px;
	margin:10px 0 10px 20px;
	}

.right-col ul { 
	margin: 3px 0 10px 10; 
	}

.right-col ul li a { 
	color: #7a916a!important; 
	text-decoration: none!important;
	position:relative; 
	}
	
	.right-col ul li.here{
	line-height: 18px;
	vertical-align: middle;
	margin-bottom: 6px;
}
	
.right-col ul li.here a{
	background-color: #CDD4B1;
	margin-left: -8px;
	padding-left: 10px;
	padding-right: 6px;
	padding-top: 3px;
	padding-bottom: 3px;
	background-image: url(http://miami.edu/EE/_ui/images/listHere.png);
	background-repeat: no-repeat;
	background-position: left;
	top: -2px;
}

.right-col ul li.here ul, .right-col ul li.here ul li, .right-col ul li.here ul li a  { 
	background-color: #D9E0BF; 
	background-image: none; 
}


.right-col ul li.here ul li a { 
padding-left: 8px; 
}

.right-col h5.rcol-news{ 
	width: 160px; 
	margin: 76px 0 0 25px; 
	border-bottom: 1px solid !important;
	height:16px;
	border-color:#7B9A70  !important ;
	font-size:14px;
	color:#7B9A70 ;
	}

.right-col img {
	position: relative; left: -2px;
	}

.right-col p { 
	color: #B25614; 
	margin:10px 0 10px 26px; 
	width: 160px; 
	font-size: 11px; 
	line-height: 15px; 
	}

.right-col p a { 
	text-decoration: none;
	}
	
/* 3.3	Header options in the body area of the page.
-----------------------------------------------------------------------------------------------*/	

.main-col h1, .main-col-wide h1  {
	font-size: 1.2em; 
	line-height: 1.6em; 
	color: #366732; 
	margin: 0; 
	padding-bottom: 5px;
	}
	
.main-col h2, .main-col-wide h2 { 
	font-size: 1.2em; 
	line-height:1.6em; 
	color: #b25634; 
	padding-bottom: 5px; 
	}
	
.main-col h3, .main-col-wide h3 { 
	border-bottom: 1px solid #7B9A70;
	font-size: 1.2em; 
	line-height:1.6em;
	border-color:#b2c29b;
	margin-bottom: 4px;
	color:#7B9A70; 
	}
	
.main-col h4, .main-col-wide h4 {
	font-size: 1.2em; 
	color: #366732; 
	border-bottom: 1px solid #b2c29b; 
	line-height:1.6em;
	padding: 5px 20px 5px 0;
	}
.main-col h5, .main-col-wide h5 {
	font-size: 1.2em; 
	color: #b25634; 
	border-bottom: 1px solid #b2c29b; 
	line-height:1.6em;
	padding: 5px 20px 5px 0;
	}

.main-col h6, .main-col-wide h6 {
	background-color:#7b9a70; 
	padding:5px; 
	color:#FFF; 
	margin-bottom:15px;
	}

/* 3.4	Header for Related Links with Links Style
-----------------------------------------------------------------------------------------------*/	

.main-col .related, .main-col-wide .related { 
	font-size: 10px; 
	margin-left: 0px;
	}

.main-col .related ul a, .main-col-wide .related ul a { 
	margin-top:0px;
	}

.main-col .related ul li a, .main-col-wide .related ul li a { 
	font-weight: normal;
	margin-left:0px; 
	}

/* 3.5	Breadcrumbs. The breadcrumbs do not appear by default, since most static sites do not support interactive breadcrumbs. Still, if you'd like to hard-coded breadcrumbs, the styles below will help. Simply code your breadcrumbs like this, one after the next, in order to have the style match UM's: <li><a href="#">Your Breadcrumb's Name</a><span>&raquo;</span></li> Place your code within the <div class='breadcrumb'></div> that already appears on the standard template pages provided with the Examples download.
-----------------------------------------------------------------------------------------------*/	

.breadcrumb { 
	padding: 15px 0 8px 20px; 
	background: #d9e0bf;
	}
	
.breadcrumb li { 
	float: left; 
	color: #333;
	list-style-image: url('css_images/bullet.gif'); 
	}

.breadcrumb li span { 
	padding: 0 5px;
	}
	
.breadcrumb li a, .breadcrumb li a:link, .breadcrumb li a:visited, .breadcrumb li a:active { 
	color: #b25614; 
	}

/* 3.6	Main Page Header. 
-----------------------------------------------------------------------------------------------*/	
	
.page-header { 
	width: 680px; 
	overflow: hidden; 
	background-color: #7B9A70; 
	padding: 12px 0 8px 40px ;  
	}
	
.page-header h1 { 
	color: #d9e0bf; 
	font-size: 2.5em; 
	font-weight: normal;
	line-height:.9em; 
	}
	
.page-header h2 { 
	color: #d9e0bf; 
	font-size: 1.3em; 
	font-weight: normal;
	line-height: 2em; 
	}

/* 3.7	Styles for table with horizontal rules. These styles allow you to layout a table with horizontal lines beneath each row. Attach this style to the <td> tag in the table cell. No tages are required on the actual content inside the cells. Use the "focus" style for bold row content.
-----------------------------------------------------------------------------------------------*/	

.table_cell_focus {
	color: #FFF;
	border-top: 1px solid #b2c29b;
	line-height:1.7;
	padding: 5px !important;
	font-weight:bold;
	vertical-align:top;
	background: #7b9a70;
	font-size:9px;
	}
	
.table_cell_normal { 
	border-bottom: 1px solid #b2c29b !important; 
	line-height:1.7;
	padding: 5px 20px 5px 0;
	vertical-align:top;
	font-size:9px;
	}

/* 3.8	Left-Column Photo and Body Image Styles. 
-----------------------------------------------------------------------------------------------*/	
	
.photo-box { 
	border: 1px solid #000; 
	}
	
.photo-box img { 
	border: 1px solid #d9e0bf; 
	padding: 0; 
	display: block; 
	}

.photo-box_uway {	
	float: right;
	margin:0;
	} 
	
.left-col .photo-box {
	width: 158px; 
	margin: 5px 0 5px 40px; 
	position: relative; 
	}

.left-col .left-photo-box { 
	position: relative; 
	}

.left-col .left-photo-box .photo-trans { 
	position: absolute; 
	width: 240px; 
	min-height: 20px; 
	bottom: 0; 
	left: 0; 
	background-color: #7b9a70; 
	opacity: .7;
	}
	
.caption {
	font-size: 10px; 
	margin-left: 0px;
	color: #333;
	}

/* 3.9	Mission Statement Area. 
-----------------------------------------------------------------------------------------------*/	
.mission-statement { 
	background: #b3812f url('css_images/bg_mission_statement.png') no-repeat top right; 
	width: 640px; 
	padding: 28px 40px; 
	border-top: 1px solid #e9ebc6; 
	}

.mission-statement p { 
	font-size: 1.7em; 
	line-height: 1.8em; 
	color: #ffffff; 
	}
	
/* 4. FOOTER CONTAINER AND STYLES
-----------------------------------------------------------------------------------------------
===============================================================================================*/

.footer-wrap { 
	position: relative; 
	}

div.footer-wrap {
	border-top: 1px solid #D9E0BF; 
	}
	
div.footer { 
	padding: 25px 0 25px 40px; 
	position: relative;
	background-image:url(css_images/footer_bg.png);
	background-repeat: no-repeat;
	padding-left:240px;
  }

div.footer address {
  color: #eaf1e1; 
  font-size: 11px; 
  line-height: 1.4em;
  font-style: normal;
  margin-bottom:11px;
  }

div.footer address span {
  display:block;
  }

div.footer ul {
  width:315px;
  }

div.footer ul li {
  color: #d8e0b9;
  font-size: 1.1em;
  list-style-image: url('css_images/bullet.gif');
  }

div.footer a {
  color: #d8e0b9 !important;
  text-decoration: none !important;
  line-height:1.35em;
  list-style-image: url('css_images/bullet.gif');
  }

.footer .explore {
	background: #739368;
	width: 360px;
	overflow: hidden;
	position: absolute;
	right: 229px;
	top: 14px;
	}

.footer .explore h3 { 
	font-size: 15px; 
	color: #ffffff; 
	border-bottom: 1px solid #a0b599; 
	padding: 18px 15px 13px; 
	line-height: 15px 
	}

.footer .explore ul { 
	float: left; 
	width: 100px; 
	padding: 10px 0; 
	}

.footer .explore ul li { 
	font-size: 13px; 
	line-height: 15px; 
	margin-bottom: 4px; 
	}

.footer .explore ul li a { 
	color: #d8e0b9; 
	text-decoration: none; }

.footer .explore ul.col1 { 
	margin-left: 15px; margin-right: 5px; 
	}

.footer .explore ul.col2 { 
	margin-left: 5px; 
	margin-right: 15px; 
	}

.footer .explore ul.col3 { 
	margin-left: -15px; width: 115px; 
	}