@charset "UTF-8";

/*
Who would have thought?: Case Western Reserve University Annual Report 2010-11
*/

/*--------------------------------------------------------------------*/
/*--------------------------------DESKTOP-----------------------------*/
/*--------------------------------------------------------------------*/

/*Reset*/
html, body, address, footer, blockquote, dl, form, pre, table, tr, iframe, span,
dd, dt, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, abbr, acronym, b, bdo, big, cite, code, dfn, i, kbd, q, samp, small, sub, sup, tt, var, legend, fieldset {font-family: Helvetica, sans-serif; color:#333; margin:0; padding:0}

header, nav, article, section, footer, address, figure, aside, hgroup {display: block}

p, ul, ol {font-size:.8em; font-weight:normal; color:#333; line-height:1.5; text-shadow:1px 1px 1px #fff} img {border:0}

/* Header */
header {background:url(../images/header-bg-2.png) #fff repeat-x top; margin:-4px 0 45px 0; padding:0; -moz-box-shadow:0 1px 7px #ddd; -webkit-box-shadow:0 1px 7px  #ddd; box-shadow:0 1px 7px #ddd; border-bottom:solid 1px #fff; behavior: url(/whowouldhavethought/css/ie-css3.htc); *border-bottom:solid 2px #eee}

.header-container {position:relative; width:960px; height:390px; margin:0 auto; over-flow:auto; clear:both}

/* Logo */
.logo-holder {width:327px; height:104px; padding-top:38px; float:left}

/* Video holder */
.video-holder {position:relative; background-color:#f5f5f5; width:560px; height:315px; margin-top:35px; float:right; -moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;box-shadow: 0 0 5px #888}

.video-holder iframe {padding-bottom:5px}

.voiceover-link {position:absolute; bottom:-35px; right:5px;}

/*Local nav*/
.nav-wrapper {position:absolute; padding-top:13px; left:1px; bottom:60px; width: 310px; height:166px; border-top:solid 1px #ddd}
nav ul {margin:0; padding:0}
nav li {margin:0; list-style-type:none}
nav li a {color:#666666; font-weight:normal; font-size:1.2em; text-decoration:none; display:block; padding:7px 0 7px 10px}
nav li a:hover {background:#f8f8f8; color:#333; text-decoration:none; display:block; -moz-text-shadow:1px 1px #fff; -webkit-text-shadow:1px 1px #fff; text-shadow:1px 1px #fff}

/* Container [Thumbs holder] */
.container {position:relative; width:960px; margin:0 auto; padding:0 0 20px 0; overflow:auto; border-bottom:solid 1px #ddd}

/* Thumbs */
ul.thumbs {width:960px;list-style: none;margin: 0; padding: 0}
ul.thumbs li {padding: 0 40px 10px 0; display:block; float:left; list-style-type:none}
ul.thumbs .thumbs-right {padding: 0 0 35px 0; display:block; float:left; list-style-type:none}
ul.thumbs li a.thumb {width: 290px; height: 125px; /*-moz-box-shadow: 2px 2px #eee; -webkit-box-shadow: 2px 2px #eee; box-shadow: 2px 2px #eee; cursor: pointer; border:solid 1px #eee\9; *border:solid 1px #eee*/}
ul.thumbs li span {width: 290px;height:125px; overflow:hidden; display: block}
ul.thumbs li a {text-decoration: none; color: #777; display: block;}

/* Bottom content [More stories] */
.bottom-content {background: url() no-repeat top center; }
.bottom-content-container {background:url(../images/bottom-container-bg.png) repeat-x top center; position:relative; width:960px; margin:0 auto; padding:30px 0 100px 0; overflow:auto; border-top:solid 1px #fff; *border-top:0}
.bottom-content-left-col {width:590px; margin-left:20px; float:left}
.bottom-content-right-col {font-size:.95em; width:300px; padding-left:40px; float:right; border-left:solid 1px #eee}
.bottom-content-right-col img { display:block; width:55px; height:55px; margin:17px 20px 5px 0; -moz-box-shadow: 6px 6px #ddd; -webkit-box-shadow: 6px 6px #ddd; box-shadow: 2px 3px 3px #ddd; float:left}

.bottom-content-right-col ul {margin:0; padding:0}
.bottom-content-right-col li {list-style-type:none; display:block; margin:0; padding:0}
.bottom-content-right-col li a {color:#333;  line-height:1.5; text-decoration:none}
.bottom-content-right-col h4 {margin:10px 0 10px 0}

/* More stories scroller */
#jp-container {font-size:.75em}
#jp-container a {color:#333; text-decoration:none; text-shadow:1px 1px 1px #fff}
#jp-container a div h3 {margin:0; padding:0}
.jp-container{width:560px;height:210px;position:relative}
.jp-container a{padding:5px 20px 5px 20px; display:block; line-height:20px; border-bottom:1px solid #ddd; border-top:1px solid #FFF}
.jp-container a:first-child {border-top:none;}
.jp-container a:last-child {border-bottom:none;}
.jp-container a:hover {background:#ddd; border-bottom-color:#CCC}
.jp-container a h3 { font-size:.9em; font-weight:bold; padding:2px 0 5px 0}
.jp-container a img {width:40px; height:40px; float:left; margin:5px 10px 20px 0px}

/* Footer */
footer {background: #0a304e; border-top:solid 1px #ddd}
.footer-container {color:#999; position:relative; width:960px; margin:auto; padding:10px 0 10px 5px; overflow:auto; clear:both}
.footer-container ul {margin:0; padding:0}
.footer-container li {margin:0; list-style-type:none; float:left; padding:0 15px 1px 15px; border-right:solid 1px #435f7f; color:#999; text-shadow:none; font-style:normal}
.footer-container li a {color:#999;text-decoration:none; text-shadow:none}
.footer-container li a:hover {color:#fff; text-decoration:underline}
.footer-content-left {padding-left:0; list-style-image: none; list-style-type:none} .footer-container ul 
.mobile-link {background:url(../images/iphone-icon.png) no-repeat center left; background-position: 15px 1px; border:none; padding-left:30px}

/* CSS3 buttons */
.btn-holder span {display:block; float:right; margin:5px 100px 0 0}
.button a {background:#eee; padding: 5px 7px 3px 7px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-shadow: #fff 0 1px 0; color: #333; font-size: 11px; border:solid 1px #ccc;  text-decoration: none; vertical-align: middle; cursor:pointer}
.button a:hover {background:#eee; color: #333; -moz-box-shadow: 0 0 2px #333;-webkit-box-shadow: 0 0 2px #333; box-shadow: 0 0 2px #333; border:solid 1px #fff} .button:active {background: #ccc; color: #999}

.social-media {display:block; float:right; padding:5px 0 5px 0}
img a {border:none}

/*--------------------------------------------------------------------*/
/*-----------------------------SUBPAGES-------------------------------*/
/*--------------------------------------------------------------------*/

.header-sub {background:url(../images/header-bg-2.png) #fff repeat-x top; margin:-4px 0 0 0; padding:0; -moz-box-shadow:0 1px 5px  #ddd; -webkit-box-shadow:0 1px 5px  #ddd; box-shadow:0 1px 5px #ddd; border-bottom:solid 1px #fff;}
.header-container-sub {position:relative; width:960px; height:150px; margin:auto; over-flow:auto}
.sub-header {font-weight:normal; color:#959595}

/* Top Navigation [subpages] */
.top-nav-wrapper {margin:0; padding:0}
.top-nav ul {position:absolute; width:505px; margin:0; padding:0; list-style:none; top:35px; right:0; float:left}
.top-nav li {float:left}
.top-nav li a:link, .top-nav li a:visited  {display:block; font-size:1em; text-decoration:none; color:#ddd; text-shadow:none; margin-right:3px; padding:3px 15px; -webkit-text-shadow: -1px -1px #000; -moz-text-shadow: -1px -1px #000; text-shadow: -1px -1px #000}
.top-nav li a:hover {background:#315f80; color:#fff; -webkit-border-radius:3px;-moz-border-radius:3px; border-radius:3px}
.top-nav li a.current, .top-nav li a.current:hover, .top-nav li a.current:active {background:#333; color:#fff; -webkit-border-radius:3px;-moz-border-radius:3px; border-radius:3px;cursor: default}
.top-nav ul .padding-right {padding-right:0}
#financials .financials, #leadership .leadership, #president .president  {background:#315f80; color:#fff; -webkit-border-radius:3px;-moz-border-radius:3px; border-radius:3px; cursor:default} 

.main-col {width:960px; margin:0 auto; padding:0 0 30px 0; overflow:auto; border-bottom:solid 1px #ddd}
.img-right {display:block; width:245px; height:230px; float:right; margin:0 0 90px 30px}

.img-right-p {display:block; width:146px; height:219px; float:right; margin:10px 10px 70px 30px; -moz-box-shadow: 3px 3px #ddd; -webkit-box-shadow: 3px 3px #ddd; box-shadow: 3px 3px #ddd}

.breadcrumb {padding:25px 0 5px 0; margin-bottom:25px}
.breadcrumb span {color:#959595}

/* Story mini-thumbs */
.story-nav-wrapper-main {position:absolute; right:10px; bottom:5px}
.story-nav-wrapper {position:absolute; right:10px; bottom:5px}
ul.story-thumbs {list-style: none;margin: 0; padding:0}
ul.story-thumbs li {padding: 25px 5px 10px 0; display:block; float:left; list-style-type:none}
ul.story-thumbs .thumbs-right {padding: 25px 0 10px 0; display:block; float:left; list-style-type:none}
ul.story-thumbs li a.thumb {width: 50px;height: 50px;cursor: pointer}
ul.story-thumbs li span {width: 50px;height: 50px;overflow: hidden;display: block}
ul.story-thumbs li a {text-decoration: none; color: #777; display: block}
.thumb span img {border:none} /*IE fix*/

/* Financials */
#financials table {color:#333; font-size:.9em; width:80%}
#financials table td {padding:10px 0 10px 10px}
#financials hr {color:#f3f3f3}
#financials .sub-title {font-size:.85em; border:none; margin-top:10px}
#financials hr, #leadership hr {border:0; background:#ddd; color:#ddd; height:1px}
#leadership #tab-1 hr, #leadership #tab-2 hr {width:10%}
#tabs .tab-1-b {border:0; font-size:.7em; color:#ccc; line-height:1.5}

/* Leadership */
#leadership table {color:#333; font-size:.85em; width:80%}
#leadership table td {padding:10px 0 10px 10px}
.highlight {background:#f7f7f7}

#tabs { margin:0; padding:0}
#tabs span {display:block; margin-bottom:30px; height:54px; border-bottom:solid 1px #ddd}
#tabs ul { margin:0; padding:0}
#tabs li { margin: 0; padding:0; list-style: none; margin-left:10px}
*html #tabs li {display: block; }
#tabs li, #tabs li a {display: block; float:left}
#tabs ul li a {background:#eee; text-decoration: none; padding:17px 15px 18px 15px; color:#333; font-weight: bold; border:solid 1px #ddd; border-bottom:0; -webkit-border-top-right-radius:3px; -webkit-border-top-left-radius:3px; -moz-border-radius-topright:3px;  -moz-border-radius-topleft:3px}
#tabs ul li.active {background: #fff}
#tabs ul li.active a {background:#fff; color:#0a304e}
#tabs h5 {padding-left:10px; font-weight:normal}
#tab-1, #tab-2 { margin-left:10px}
#tab-2 a {color:#333}
#tab-2 a:hover {text-decoration:none}

/* Back to top Button */
#back-top {position:fixed; bottom:50px; margin-left:-80px}
#back-top a {width: 108px;display: block; text-decoration: none; color: #bbb; -webkit-transition: 1s;-moz-transition: 1s; transition: 1s}
#back-top a:hover {color: #000}
#back-top span {width: 30px;height: 30px;display: block;margin-bottom: 7px;background: #ddd url(../images/top-arrow.png) no-repeat center center;background: #ccc url(../images/top-arrow.png) no-repeat center center;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s}

/* Don't work well on IE7 :( */
#back-top span {*display:none}
#back-top a:hover span {background-color: #777}

.bottom-right-sec-link a {color:#0E4C7D; text-decoration:none}
.bottom-right-sec-link a:hover {background:#eee; text-decoration:underline}
.left-m {display:block; margin-left:20px}