@charset "utf-8";

/* CSS Document - University of Cincinnati Global styles CSS
* Copyright 2008-2009  University of Cincinnati, Cincinnati Ohio.
* @version - 960px Fixed Width Global CSS RC 1.3
* Note: this document has not been optomized to allow for quicker changes and ease of reading.  Please optomize prior to launching a new site.

RC 1.3 release notes (7/14/09):
	1.) Added print style.css
	2.) added image caption link and hoverstate styles.

RC 1.2 release notes (6/24/09):
	1.) Added additional documentation to this sheet as per TJI.
	2.) Added styles for inner-wrap_no_nav and center_no_nav for CMS purposes. 
	3.) Added PurpleText class for CMS edit view purposes.
	4.) Added unordered list styles for both center_no_right and center_no_nav.
 
RC 1.1 release notes (6/1/09):
	1.) Increased width to 960px. Banner and branding approved by Angela Klocke.
	2.) Increased width of #footertext, removed background image, included a bg color. Not sure why I put a bg image in there in the first place, but it's gone now.
	3.) Moved the #leftimagenav a#link0 and #rightimagenav a#link to cover the new graphical elements in the banner.
	4.) Change the width of both #center and #rightbar to accomodate new width of #innerwrap
	5.) Increased width of #center_no_right to accomodate for new width of #innerwrap

RC 1.0 release notes (5/7/09):
	1.) Decided that this release can be the final oh-dot release after discussion with TJI.  No changes were made between 0.9.3 and RC 1.0

0.9.3 release notes (5/1/09):
	1. fixed small rendering issue with #footer in ie6 . . . removed padding in exchange for margin
	2. added padding to #footerleft and #footerright to compensate for 2
	
* S73V3N 
* @author BAW
*/

html {
/* in order to have a 100% tall design, the html needs to also be 100%, as does anything above the element (which is why it starts here). This is for inheritance */
height:100%;
/*Following 2 lines are for browser reset */
margin:0px;
padding:0px;
background-color:#ffffff;
}
body {
background-image:url(../images/htmlbg.jpg);
background-repeat:repeat-x;
font-family:Arial, Helvetica, sans-serif; /*set the default font group for the page. this can be changed at the div or element level if necessary*/
font-style: normal; /*set the default font style for the page. this can be changed at the div or element level if necessary*/
font-weight: normal;/*set the default font weight for the page. this can be changed at the div or element level if necessary*/
font-size: .75em;/*set the default font size for the page. this can be changed at the div or element level if necessary*/
height:100%;/*This is for height inheritance as explained above */
line-height:1.4em;/*set the default line height for the page. this can be changed at the div or element level if necessary*/
margin:0;/*browser reset */
padding:0;/*browser reset */
}

/* ------------- STRUCTURE ------------- */
#wrap {
min-height:100%; /*for firefox.  ie6/7 ignores this*/
position:relative;
margin:0 auto; /*centers the design*/
padding:0px;
width:990px; /*controlling width of the wrap: larger size allows for the dropshodow */
background-image:url(../images/body_bg1.jpg);
background-repeat:no-repeat;
background-color:#ffffff;
}
* html #wrap {
height:100% /*this is further correction for 100% tall and browser compatibility */
}
#inner-wrap {
padding:0px 0px 90px 0px; /*bottom padding needs to be 20px taller than the footer. this backs the content off the base of the browser window.*/
width:960px; /*set the actual width of the "content" (everything inside wrap, not including the footer) area */
margin:0 auto;/*center the inner-wrap container div within wrap since this div is smaller than the wrap div.*/
}
#inner-wrap:after {
/*this allows for the footer to be positioned absolutely to the bottom by clearing floats*/
clear:both;
content:" ";
display:block;
}
/*seperate style for no_nav to remove the dotted line*/
#inner-wrap_no_nav {
padding:0px 0px 90px 0px; /*bottom padding needs to be 20px taller than the footer. this backs the content off the base of the browser window.*/
width:960px; /*set the actual width of the "content" (everything inside wrap, not including the footer) area */
margin:0 auto;/*center the inner-wrap container div within wrap since this div is smaller than the wrap div.*/
/*Do NOT define a height here. The grand-children of this div define it.*/
}
#inner-wrap_no_nav:after {
/*this allows for the footer to be positioned absolutely to the bottom by clearing floats*/
clear:both;
content:" ";
display:block;
}
#content {
/* start of the content area.*/
margin:0 auto;/*center the content container div within inner-wrap. This allows a little flexibility in the design*/
padding:0px;
text-align:left;
width:960px;/*this also needs the same width as the inner-wrap*/
/*Do NOT define a height here. The children of this div define it.*/
}

/*banner styles*/
#header {
z-index:1;/*z-index is important if the global nav is present. this positions the header div under the global nav*/
width:100%; /* this is 100% of the pixel width specified in the inner-wrap*/
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:transparent;/*No need to define a color since there is a background image*/
background-position:bottom;/*Important since there's a global nav*/
height:322px;/*height of the header image +25px to allow for the global nav height*/
padding-top:12px;
margin:0px 0px 5px 0px; /*pushes the actual content down 10px*/
}

/*left bar styles*/
#leftbar{
padding-right:5px; /*moves the list off the right edge by 5px*/
width:165px; /*this width and the background-position of the inner-wrap need to be the same*/
height:auto;/*this needs to be auto to allow the text height to dictate the height of the div*/
float:left; /*this is important*/
background-color:transparent;/*do not define a color if you are using a background-image for the wrap*/
}

/*Center style*/
#center{
margin:0px;/*set margin to 0 all the way around this div. Not totally necessary, but in for good measure so other changes don't effect this div. */
width:595px;/*width of the main text area*/
padding:0px 0px 0px 5px; /*adds 5px of padding to the left . . . allows more room for the verticle dots*/
height:auto;/*this needs to be auto to allow the text height to dictate the height of the div*/
float:left; /*this is important*/
background-color:transparent;/*do not define a color if you are using a background-image for the wrap*/
}
#center_no_right{
/*utilize this instead of #center if there is no rightbar.  You MUST delete the rightbar div for things to align correctly */
margin:0px 0px 0px 0px;/*set margin to 0 all the way around this div. Not totally necessary, but in for good measure so other changes don't effect this div. */
width:670px; /*added width since there is no rigthbar*/
padding:20px 20px 0px 20px;  /*adds 5px of padding to the left . . . allows more room for the verticle dots*/
height:auto;/*this needs to be auto to allow the text height to dictate the height of the div*/
float:left; /*this is important*/
background-color:transparent;/*do not define a color if you are using a background-image for the wrap*/
}
#center_no_nav{
/*utilize this instead of #center if there is no leftbar or rightbar.  You MUST delete BOTH the leftbar and rightbar divs for things to align correctly */
margin:0px;/*set margin to 0 all the way around this div. Not totally necessary, but in for good measure so other changes don't effect this div. */
width:940px;/*added width since there is no left or rigthbar*/
padding:0px 0px 0px 10px;/*adds 10px of padding to the left*/
height:auto;/*this needs to be auto to allow the text height to dictate the height of the div*/
float:left;/*this is important*/
background-color:transparent;/*do not define a color if you are using a background-image for the wrap*/
}

/*right bar styles*/
#rightbar{
margin:0px 0px 0px 15px;/*adds 5px of margin to the left*/
padding:0px 0px 0px 0px; /*adds 15px of padding to allow for the rightbar dots*/
width:230px;/*If you change this width, ensure that you reduce the width of the #center div*/
height:auto;/*this needs to be auto to allow the text height to dictate the height of the div*/
float:left;/*this is important*/
background-color:transparent;/*do not define a color if you are using a background-image for the wrap*/
background-image:url(../images/rightbarbg.jpg);
background-repeat:repeat-y;
}

#rightbartop{
float:left;
width:230px;
height:113px;
background-image:url(../images/rightbartop.jpg);
margin-bottom:40px;
}

#rightbarcenter{
padding:0px 40px 0px 40px;
}

#rightbarcenter p{
padding-bottom:10px;
}

#rightbarbottom{
float:left;
width:230px;
height:240px;
background-image:url(../images/rightbarbottom.jpg);
}

/*footer styles*/
#footer {
position:absolute; /*this must be absolute so the footer hugs the bottom of the browser*/
bottom:0px;/*this must be 0px so the footer hugs the bottom of the browser*/
padding:0px 0px 0px 0px; /*removes any inherited padding*/
width:100%;/*this is 100% of the wrap (NOT INNER-WRAP) pixel width*/
height:70px;/*height of the footer. If you change this, you must change the bottom padding of the inner-wrap*/
color:#FFFFFF;/*text color of the footer*/
}
#footertext {
width:960px;/*This needs a pixel width (same as inner-wrap) so it centers properly with the rest of the content*/
background-image:url(../images/footerbg.jpg);
background-repeat:repeat-x;
height:70px;/*this isn't totally necessary, but I put it in anyway for good measure*/
padding:0px 0px 0px 0px;/*removes any inherited padding*/
margin:0px auto;/*centers the footertext div within #footer*/
}
#footerleft{
/*text that appears on the left of the footer*/
padding:10px 0px 0px 10px; /*adds 10px of padding to both top and left of the div*/
margin:0px 0px 0px 0px;/*removes any inherited padding*/
position:relative;/*important if more than one div is present in footertext*/
float:left;/*important if #footerright is included. This allows multiple divs in the #footertext div*/
width:100%;/*no real reason for this width. it can be whatever looks best in the design.  Don't exceed the total of footerright - footertext pixel width.*/
}
.footerleft{
/*text that appears on the left of the footer*/
padding:10px 0px 0px 10px; /*adds 10px of padding to both top and left of the div*/
margin:0px 50px 0px 70px;/*removes any inherited padding*/
position:relative;/*important if more than one div is present in footertext*/
float:left;/*important if #footerright is included. This allows multiple divs in the #footertext div*/
width:190px;/*no real reason for this width. it can be whatever looks best in the design.  Don't exceed the total of footerright - footertext pixel width.*/
}
#footerright{
/*for the it's all uc logo. If not used, the div can just be deleted.*/
position:relative;/*important if more than one div is present in footertext*/
float:right;/*important if more than one div is present in footertext*/
margin:15px 15px 0px 0px; /*Addes 15px of margin to the top and right.  Positioning for the it's all uc logo*/
padding:0px;/*clear any inherited padding*/
width:107px;/*this should be the same width as the background image*/
height:38px;/*this should be the same height as the background image*/
}

/*print styles*/
#printimg{
/*hidden div to include the UC logo in a print view if desired*/
display:none;
}

/* handles the skip to content link for ADA */
div.skip{
display:none;
}

/* ------------- TYPOGRAPHY  -------------*/

/*universal h tags */
h1 {
line-height:1.3em;
font-weight:bold;
margin:0; 
color:#768770;
background-color:transparent;
font-size:1.7em;
padding:0px;
margin:0px;
}
h2{
color:#7099fa;
background-color:transparent;
font-size:1.6em;
padding:0px;
margin:0px;
}
h3{
color:#768770;
background-color:transparent;
font-size:1.2em;
padding:0px;
margin:0px;
}
h4{
color:#000000;
background-color:transparent;
font-size:1.2em;
padding:0px;
margin:0px;
}

/* universal list styles for both the content area (and it's varients) and the rightbar*/
#center ul, #center_no_right ul, #center_no_nav ul,#rightbar ul{
font-weight:bold;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 20px;
}
#center ul li, #center_no_right ul li, #center_no_nav ul li, #rightbar ul li{
font-weight:normal;
list-style-image:url(../images/arrow_right_red.gif);
background-color:transparent;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
#center ul li ul li, #center_no_right ul li ul li, #center_no_nav ul li ul li, #rightbar ul li ul li{
font-weight:normal;
font-style:normal;
list-style-image:url(../images/arrowGray10x10.gif);
background-color:transparent;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}

/*left bar list styles. These are styled specifically for the left nav. If you want to change link colors, look at the leftbar a styles below*/
#leftbar ul{
margin:0px 0px 10px 0px;
padding: 0px 0px 0px 5px;
list-style:none;
}
#leftbar ul li{
color:#e00122;
background-color:transparent;
font-size:14px;
font-weight:bold;
padding:0px;
margin:0px;
}
#leftbar ul li ul li{
list-style:none;
color:#000000;
background-color:transparent;
font-size:12px;
font-weight:bold;
padding:0px;
margin:0px;
}

/*global content link styles*/
a:link{
color:#4f5a4b;
text-decoration:underline;
background-color:transparent;
}
a:visited{
color:#4f5a4b;
text-decoration:underline;
background-color:transparent;
}
a:hover{
color:#768770;
text-decoration:underline;
background-color:transparent;
}
a:active{
color:#768770;
text-decoration:underline;
background-color:transparent;
}

/*banner image navigation -- e.g. image-map spoof*/
#leftimagenav a{
display: none; /*this allows for an a tag to have a height and a width*/
float: left;/*important*/
height:auto;/*allows for the height to be inherited*/
width:auto;/*allows for the width to be inherited*/
}
#leftimagenav a#link0{ /*the a#link's are all number seperately.  This isn't totally necessary, but helps when scanning through the code*/
display:none;
position:absolute;/*important*/
display: block;/*important. If you want to turn the links off at a css level, change to "none".*/
margin:-360px 0px 0px 50px;/*margin to move the div over the graphical element in the banner*/
width:190px;/*width of the desired link area*/
height:90px;/*height of the desired link area*/
background-color:transparent; /*important, otherwise your header background image will be covered with this color*/
/*uncomment The next line to get a visual of where the link area is. Re-comment when finished with posisitioning*/
/*border:solid blue 1px;*/
}
#rightimagenav a{
display: none;/*this allows for an a tag to have a height and a width*/
float: right;/*important*/
height:auto;/*allows for the height to be inherited*/
width:auto;/*allows for the width to be inherited*/
}
#rightimagenav a#link1{/*the a#link's are all number seperately.  This isn't totally necessary, but helps when scanning through the code*/
display:none;
z-index:2;/*Very important! z-index to allow this link to be under the globalnav dropdown*/
position:absolute;;/*important*/
display: block;/*important. If you want to turn the links off at a css level, change to "none".*/
margin:-115px 0px 0px 500px;/*margin to move the div over the graphical element in the banner*/
width:400px;/*width of the desired link area*/
height:50px;/*height of the desired link area*/
background-color:transparent; /*important, otherwise your header background image will be covered with this color*/
/*uncomment The next line to get a visual of where the link area is. Re-comment when finished with posisitioning*/
/*border:solid blue 1px;*/
}

/*right bar link styles*/
#rightbar a:link{
font-weight:bold;
color:#4f5a4b;
text-decoration:underline;
background-color:transparent;
}
#rightbar a:visited{
font-weight:bold;
color:#4f5a4b;
text-decoration:underline;
background-color:transparent;
}
#rightbar a:hover{
font-weight:bold;
color:#768770;
text-decoration:underline;
background-color:transparent;
}
#rightbar a:active{
font-weight:bold;
color:#768770;
text-decoration:underline;
background-color:transparent;
}

/*define the text link styles of the footerleft*/
#footer a:link{
color:#FFFFFF;
text-decoration:underline;
background-color:transparent;
}
#footer a:visited{
color:#FFFFFF;
text-decoration:underline;
background-color:transparent;
}
#footer a:hover{
color:#FFFFFF;
text-decoration:underline;
background-color:transparent;
}
#footer a:active{
color:#FFFFFF;
text-decoration:underline;
background-color:transparent;
}

/* Images */
a > img {
border:none;/*removes the border browsers put around images when they are linked*/
}
.bodyimage{
height:auto;
margin:8px 8px 0px 8px;
padding:0px 0px 0px 0px;
width:auto;
}
.float_left{
float:left;
height:auto;
width:auto;
}
.float_right{
float:right;
height:auto;
width:auto;
}

/*define the caption text for images*/
.caption{
color:#666666;
height:auto;
margin:4px 0px 0px 0px;
padding:0px 0px 0px 0px;
text-align:center;
width:auto;
}
/*caption link styles*/
.caption a{
color:#666666;
text-decoration:underline;
}
/*caption link hoverstate*/
.caption a:hover{
color:#e00122;
}

/* This is for the edit view of Serena Collage. Delete if this is going into another CMS product or if this is being used as hand-edit templates*/
.PurpleText{ 
color#9966cc;
}
#horiznav{
height:35px;
width:960px;
margin:0px auto 10px auto;
}

#horiznav ul {list-style:none;margin:0;padding:0 0 0 5px;}
#horiznav li {float:left;width:136px;margin:0;padding:0;text-align:center;}
#horiznav li a {font-size:12px;display:block;padding:10px 8px;height:100%;color:#fff;text-decoration:none;border:solid #fff 1px;}

#condolences, #obits{
width:400px;
margin:0 auto;
}

.obitborder{
margin:5px 0px 5px 0px;
padding:20px;
border:solid #cccccc 1px;
}

#obitdetail em{
color:#333333;
}