/* Styles for Yale Health Plan
Web Services, ITS, Yale University
CSS styles by Victor Velt <victor.velt@yale.edu>
10-13-06, version 1 (VV)
--------------------------------------------------------------- */

/*	QuickFind:
	=Layout & Page Setup
	=Clears
	=Hide
	=Search
	=Magic-Y Menu
	=Fonts in Content Column
	=Scancol & Sidebar
	=Jump Menus
	=Footer
	
	=PRESENTATIONAL STYLES
	=Horizontal Rule
	=Quotes, Photos, Side-boxes

	=@Media PRINT STYLES
	
*/

/* =Layout & Page Setup
------------------------------------------------------ */

body {
background-color: #0e4c92;
padding: 0;
margin: 0;
}

a { color: #666; }
a:hover { color: #2a85ee; }

#topper {
background: #2e65a2 url(../images/bkgd_topper.gif) repeat-x;
}

#header {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
background-color: #0e4c92;
height: 65px;
}

#header img {
display: block;
margin-left: 206px;
}

#header span {	/* controlled by @Media Print styles below */
display: none;
}

#header-accent {
background-color: #0f9d01;
height: 21px;
border-bottom: 1px solid #fff;
}

#banner {
background-color: #a7b7c6;
}

#banner img {
display: block;
}

#quicklinks {
border-top: 1px solid #fff;
background-color: #560069;
padding-left: 468px; /* must put padding here, not on the image */
}

#quicklinks img {
display: block;
}

#outer-wrap {
background-color: #fff;
}

#inner-wrap {
background-color: #fff;
width: 780px;
padding-bottom: 20px;
background: #fff url(../images/bkgd_main_line.gif) repeat-y;
}

/* Sets minimum height for the page, works in IE 6 & 7 and better browsers */
#inner-wrap {
min-height: 450px;
height: auto !important;
height: 450px;
}

#col1 {
float: left;
width: 175px;
padding-left: 13px;
padding-right: 5px;
margin-right: 15px;
}

#col2 {
float: left;
width: 368px;
margin-right: 15px;
}

#col2.wide {
width: 545px;
}

#col3 {
float: left;
width: 178px;
}

/* Footer styles are last */

body.internal #header-accent {
height: 10px;
border: none;
}

body.internal #inner-wrap {
background: #fff url(../images/bkgd_main_line.gif) repeat-y;
}


/* =Clears floats, place in a div wherever needed
 ----------------------------------------------------- */
.clear-l { 
clear: left; 
line-height: 0px;
height: 0px;
}

.clearer { clear: both; }


/* =Hide anything
 ----------------------------------------------------- */
.hide {
visibility: hidden;
}

.hide-all {
display: none;
}


/* =Search
------------------------------------------------------ */
#search form {
margin: 0;
}

#search input.sbutton {
width: 48px;
height: 28px;
}

#search input.gobutton {
width: 28px;
height: 28px;
}

#search input.sfield {
width: 128px;
margin: 0;
padding: 0;
color: #777;
}

#search input.sfield:focus {
color: #000;
background-color: #ffd;
}



/* =Magic-Y Menu
   Works with togLyr Javascript for Yale QuickLinks
------------------------------------------------------ */
#my-wrapper {
position: absolute; 
top: 0px;
left: 609px;
width: 160px;
}

#my-button {
display: block;
float: right;
}

#my-menu {
background-color: #fff;
border: 1px solid #ccc;
padding: 5px 12px 0 12px;
margin-top: 5px;
position: absolute;
left: -999em;
}

#my-menu ul { 
width: 134px;
list-style-type: none; 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.2em;
margin: 0; 
padding: 0;
margin-bottom: 20px;
}

#my-menu ul.lower {
margin-bottom: 15px;
}

#my-menu ul li { 
padding: 2px 0px 3px 0px;
} 

#my-menu ul a { color: #003798; text-decoration: none; }
#my-menu ul.lower a { color: #585858; text-decoration: none; }
#my-menu ul a:hover { color: #2a85ee; text-decoration: none; }
#my-menu ul a:active { color: #039; }


/* =Fonts in Content Column
-------------------------------------------------------- */
#content h1, #content h2, #content h3 {
font-family: Georgia, "Times New Roman", Times, serif;
}

#content h1 {
font-size: 18px;
font-weight: normal;
color: #0e4c92;
margin-top: 12px;
margin-bottom: 0.5em;
}

#content h2 {
font-size: 15px;
font-weight: normal;
color: #0e4c92;
margin: 0;
margin-top: 1em;
}

#content h3 {
font-size: 13px;
font-weight: normal;
color: #0e4c92;
margin: 0;
margin-top: .4em;
}

h4 { 	/* can also be used in the sidebar */
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
font-weight: normal;
color: #0e4c92;
margin-top: 5px;
margin-bottom: 0.7em;
}

#content p, #content ul, #content ol, #content blockquote {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #666;
margin-top: 1em;
margin-bottom: 1em;
}

#content ul { 
margin-left: 1.2em; 
padding-left: 1.2em;
}


/* quote class */
#content p.quote {
background-color: f6f2f7;
margin-top: 1.5em;
border-top: 1px solid #c2c0c0;
border-bottom: 1px solid #c2c0c0;
padding: 7px 25px 7px 25px;
line-height: 1.4em;
color: #6c7680;
}

#content p.caption {
line-height: 1.4em;
font-size: 9px;
}


/* New: This trick makes less space between headings and the text
   that follows, while keeping normal space between headings and
   images, tables and other non-text elements. This doesn't work
   with IE 6 but its does with IE 7 and better browsers. 
----------------------------------------------------------------- */
#content h1+p, #content h2+p, #content h3+p,
#content h1+ul, #content h2+ul, #content h3+ul,
#content h1+ol, #content h2+ol, #content h3+ol,
#content h1+blockquote, #content h2+blockquote, #content h3+blockquote {
margin-top: 0.5em;
}

#content ul { 
list-style-type: square; 
}

#content li { 
line-height: 1.4em;
padding-bottom: 0.5em; 
} 

#content ul.spaced li { 
padding-bottom: 1em;
}

#content td { 	/* default small type size for table cells */
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
line-height: 1.6em;
color: #666;
}

/* Breadcrumb Trail
--------------------------------------------------*/
#content ul.breadcrumb {
list-style-type: none;
padding: 0;
margin: 3px 0 12px -8px !important;
margin: 15px 0 12px -8px;
float: left; /* keeps dimensions from collapsing */
width: 100%; /* keeps list filling the width of the content div */
border-bottom: 1px solid #fff; /* prevents extra bottom space in IE */
}

#content ul.breadcrumb li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.2em;
padding: 0 8px;
display: inline;
border-left: 1px solid #666;
float: left; /* keeps list items flush together */
}

#content ul.breadcrumb li:first-child { border: none; }


#content ul.breadcrumb li a { 
text-decoration: underline;
color: #666;
}

#content ul.breadcrumb li a:hover { 
text-decoration: underline;
color: #2a85ee;
}


/* =Scancol & Sidebar
-------------------------------------------------------- */
.item-box, .item-box-top {
background-color: #f6f2f7;
border: solid #d6d6d6;
border-width: 2px 1px;
padding: 0 6px 10px 6px;
}

.item-box-top {
margin-top: 15px;
}

#col1 h2, #col3 h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #560069;
margin-top: 1em;
margin-bottom: 0.5em;
}

#col1 ul {
margin: 0;
padding: 0;
list-style-type: none;
margin-left: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

#col1 ul li {
line-height: 1.2em;
padding-bottom: 0.6em;
}

#col3 h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.4em;
font-weight: bold;
color: #666;
margin: 1em 0 0 6px;
}

#col3 p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #666;
line-height: 1.4em;
margin-top: 0;
margin-bottom: 1em;
margin-left: 6px;
}

#col3 ul {
margin: 0;
padding: 0;
list-style-type: none;
margin-left: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666;
}

#col3 ul li {
line-height: 1.2em;
padding-bottom: 0.6em;
}

#col3 h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #0e4c92;
margin-left: 6px;
margin-top: 20px;
margin-bottom: 1em;
}

#col1 ul a, #col3 h3 ul a { text-decoration: none; }
#col1 ul a:hover, #col3 h3 ul a:hover { text-decoration: underline; }



/* =Jump Menus
------------------------------------ */
#jumpmenus {
margin-top: 20px;
}

#jumpmenus form {
margin: 0 0 15px 0;
}

#jumpmenus form select {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #585858;
width: 165px;
border: 1px solid #7d95b5;
}



/* =Footer
---------------------------------------- */
#footer {
clear: both;
background-color: #0e4c92;
} 

#footer td {
vertical-align: top;
}

#footer p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
line-height: 1.4em;
color: #fff;
text-align: center;
margin-top: 14px;
margin-bottom: 1em;
}

#footer img {
display: block;
border: none;
}

#footer a { color: #fff; text-decoration: underline; }
#footer a:hover { color: #9cf; text-decoration: underline; }
#footer a:active { color: #39f; }




/* ===================================================== */
/* =Presentational Styles
/* ===================================================== */


/* =Horizontal Rule
------------------------------ */
hr {			/* this way all browsers get the horizontal-rule even with styles off */
border: 0;		/* turns off default shading */
height: 1px;	/* sets height or thickness */
color: #c2c0c0; /* sets color for IE */
background-color: #c2c0c0; /* sets color for other browsers */
}

/*default table styles that allow borders */

#content table.spborder {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
background-color: #fff;
border-collapse: collapse;
width: 95%;
}

#content th.spborder {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 15px;
color: #369;
background-color: #e4e4d4;
border: 1px solid #ccc;
text-align: center;
padding: 5px;
vertical-align: middle;

}
#content td.spborder {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
background-color: #fff;
border: 1px solid #ccc;
padding:5px;
/* table styles that have no borders */
}
#content table.noborder {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
border: 0px;
background-color: #fff;
width: 100%;
padding:2px;

}
#content td.noborder {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
background-color: #fff;
border: 0px;
padding:2px;
}


/* =Quotes, Photos, Side-boxes
-------------------------------- */

/* col3 box styling */
#yhol_box {
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:0;
line-height:1.8em;
margin-top:10px;
}
#yhol_box a {
text-decoration:none;
}
#yhol_box a:hover {
text-decoration:underline;
}
#yhol_box_links {
margin-top:-7px;
padding-left:7px;
}

/* Content pull quote */
#content p.quote {
margin-top: 1.5em;
border-top: 1px solid #c2c0c0;
border-bottom: 1px solid #c2c0c0;
padding: 7px 25px 7px 25px;
background-color: #faf7fa;
font-size: 11px;
line-height: 1.4em;
color: #506070;
margin-bottom: 1.5em;
}

/* Content photos */
#content p.photo-caption,
#content p.photo,
#content p.left-photo-caption,
#content p.left-photo,
#content p.top-photo-caption {
float: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.2em;
color: #506070;
padding-bottom: 5px;
border-bottom: 1px solid #c2c0c0;
margin-left: 10px;
margin-top: 5px;
}

#content p.photo-caption img, 
#content p.photo img,
#content p.left-photo-caption img, 
#content p.left-photo img {
display: inline;
margin-bottom: 3px;
border: 1px solid #c2c0c0;
}

#content p.photo,
#content p.left-photo {
border-bottom: none;
}

#content p.left-photo-caption,
#content p.left-photo {
float: left;
margin-left: 0;
margin-right: 10px;
}

#content p.top-photo-caption {
float: none;
margin: 0;
}

#content p.top-photo-caption img {
margin-bottom: 4px;
display: block;
}


/* DIV callout box */
div.callout {
margin-top: 1.5em;
border-top: 1px solid #c2c0c0;
border-bottom: 1px solid #c2c0c0;
padding:5px 10px;
background-color: #faf7fa;
font-size: 11px;
line-height: 1.4em;
color: #506070;
}


/* Side Boxes */
#content .side-box,
#col3 .side-box {
width: 125px;
float: right;
padding: 8px;
background-color: #faf7fa;
border: 1px solid #c2c0c0;
margin-left: 10px;
margin-top: 5px;
}

#col3 .side-box {
float: none;
margin-left: 0;
width: auto;
}

#content .side-box p,
#col3 .side-box p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.3em;
color: #506070;
background-color: transparent;
margin-top: 1em;
margin-bottom: 1em;
}

#col3 .side-box h4 {
margin-top: 5px;
}



/* ============================================================== */
/* === PRINT STYLES ============================================= */
/* ============================================================== */


/* =@Media PRINT STYLES for better browsers
 ----------------------------------------------------- */

@media print {

#topper,
#header img,
#quicklinks,
#col1 
#col3 {
display: none;
}

#header {
border-bottom: 2px solid #999;
}

#header span {
display: inline;
}

#header span img {
display: block;
margin: 0;
margin-right: 15px;
float: left;
}

#header span h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-weight: normal;
color: #0e4c92;
margin-top: 20px;
margin-bottom: 0;
}

#outer-wrap, #inner-wrap {
width: auto;
}

#col2 {
width: 73%;
}

#col3 {
width: 25%;
}

#col2.wide {
width: auto;
}

#footer {
border-top: 2px solid #999;
}

#footer img {
visibility: hidden;
}

#col2 a, #col3 a, {
text-decoration: underline;
}

#col2 a:after, #col3 a:after {
content: " (" attr(href) ") ";
font-size: 90%;
}


}	/* closes @media styles */


/* ============================================================== */
/* ============================================================== */
/* ============================================================== */