/* exhibits.css, 2.0 2010-Apr-7
 *
 * (c) 2007 Computer History Museum		http://www.computerhistory.org
 *
 * Edit according to styleguide
 *
 */


/* MAIN LAYERS AND ELEMENTS; colors: #990000, #f9c2c2
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.localnav li a.active {	background-color: #f1dada;}
div#header { border-bottom: 4px solid #990000; }
div#footer { border-top: 2px solid #990000; }

h1 { background: url(/_common/img/exhibits/hh-exhibits.png) no-repeat 0 5px; }
h2 { color: #900; }
h2.localnav	{ color: #3e3e3e; font-size: 1.65em; padding: 0 0 0 15px; margin-top: 1em; }

div#intro { width: 684px; margin: 0 0 20px 26px; padding-top: 20px; position: relative; overflow: hidden; display: block; }
div#main { width: 684px; margin: 0 0 0 26px; position: relative; overflow: hidden; display: block; }

#exwrapfull { margin-bottom: 30px; padding-bottom: 20px;}
.exhibit { float: left; width: 204px; margin: 20px 20px 0px 0px; padding: 5px; background-color: #f2f2f2; display:inline; }
.exhibit a { color: #fff; }
.exhibit h3 { clear: both; color: #fff; font-size: 1em; font-weight: normal; padding: 2px 10px; }

.exinfo { float: right; width: 435px; }
.exinfo .extitle { border-top: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; padding: 5px 0; margin-bottom: 5px;}

.info p { margin: 2px 10px 0 10px; padding: 2px 0 10px; border-top: 1px solid #999; line-height: 1.1em; font-size: .9em;}
.info p a { font-size: .9em; color: #ccc; }
.ml-120 { margin-left: 120px; }
.ml-200 { margin-left: 200px; }

.revolution { background: #3c6f8e }
.babbageengine { background: #786c49 }
.siliconengine { background: #7c4a37 }
.visiblestorage { background: #504260 }
.timeline { background: #826733 }
.pdp1 { background: #395a72 }
.chess { background: #75512a }
.sellingcomputer { background: #1c5379 }
.microprocessor { background: #514938 }
.internethistory { background: #345490 }
.fellows { background: #3a3a3a }
.tdih { background: #725829 }



/* TABS ELEMENTS 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
div#exhibitpreview { background-color: #f2f2f2; border: 1px solid #e2e2e2; height: 454px; width: 682px; overflow: hidden; }
div#jpanes { display: block; width: 682px; height: 395px; overflow: hidden; position: relative; }
div#jpanes div#panes { position:absolute; width:9999em; height: 395px; clear:both; margin: 0; padding: 0; }
div#panes div.pane { float:left; display:block; width:662px; height: 375px; /*cursor:pointer;*/ padding: 10px; overflow: hidden; position: relative; }
div#panes div.pane div.revolutionvideo, div#panes div.pane video.revolutionvideo  
{ float:left; display:block; width:662px; height: 375px; background-color: #000000; overflow: hidden; position: relative; }
div.displayinfo { position: absolute; top: 60px; right: 40px; width: 250px; height: 200px; overflow: hidden; }
div.displayinfo span.title { display: block; padding-left: 32px; font-size: 0.9em; color: #006699; }
div.displayinfo span.alcove { display: inline-block; color:#666666; font-size: 1.25em; font-weight: bold; }
div.displayinfo span.number { display: inline-block; color:#00CCFF; width: 32px; text-align: center; font-size: 1.35em; font-weight: bold; }
div.displayinfo span.description { display:block; padding-left: 32px; font-size: .75em; color: #333333; }

ul.jtabs { list-style:none; padding:0 20px; display: block; width: 642px; height:50px; text-indent:0; list-style-image:none !important; border-top: 1px solid #999999; }/* root element for tabs  */

ul.jtabs li { display: block; float: left; height: 45px;  line-height:30px; width: 60px; text-align:center; text-decoration:none; color:#333333; padding: 5px 0px 0px 0px; margin-right: 3px; position: relative; bottom: 1px; font-size: 10px; background: /*url(/exhibits/revolution/img/tmb-out.jpg) top center no-repeat; #f2f2f2;*/  }
ul.jtabs li.video { margin-right: /*80px*/ 140px; }
ul.jtabs li.end { margin-right: 0px !important; }

ul.jtabs li img { opacity: 0.45; filter: alpha(opacity=45); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)"; }
ul.jtabs li:hover, ul.jtabs li:hover img { color:#900000; cursor: pointer !important; }/* when mouse enters the tab move the background image */
ul.jtabs li.current { width: 58px; height: 44px; padding-top: 3px; border: 1px solid #999999; border-top: #f2f2f2 solid 2px; }/* active tab uses a class name "current"*/
ul.jtabs li.current, ul.jtabs li.current:hover,  ul.jtabs li.current img:hover { cursor:default !important; color:#900000 !important; }
ul.jtabs li.current img, ul.jtabs li.current:hover img, ul.jtabs li:hover img 
{ opacity:1; filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }


/* MAIN LAYERS AND ELEMENTS for TDIH
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
div#tdihnav { float: left; width: 100%; border-top: solid 1px #CCCCCC; border-bottom: solid 1px #CCCCCC; margin-top: 20px;}
div#tdihnav ol { text-align: center;}
div#tdihnav li { float: left; list-style-type: none; border-right: solid 1px #CCCCCC; }
div#tdihnav li.norightborder { border-right: none; }
div#tdihnav li.highlighted { background-color: #f9c2c2; }
div#tdihnav a {	display: block;	text-decoration: none;	color: #5B5B5B;	padding: 2px 9px 2px 10px; }
div#tdihnav a#last { padding-right: 12px; }
div#tdihnav a:hover { background-color: #CCCCCC; }

div#tdihcontent {background-image: url(/tdih/img/bckgrnd/tdih-slice.jpg); background-repeat: repeat-y; background-position: center top; }
div#tdihheader {text-align: right;	height: 258px;	background-image:url(/tdih/img/bckgrnd/tdih-header.jpg);	background-repeat: no-repeat; background-position: center bottom;}
div#tdihbody {	text-align: left; background-image:url(/tdih/img/bckgrnd/tdih-footer.jpg); background-repeat: no-repeat; background-position: center bottom; padding-bottom: 30px; }

div.tdihevent { padding: 20px; position: relative; margin: auto; }
div.tdihevent div.tdihimage { float: left; width: 140px; margin: auto 20px 10px auto; position: relative;}

div.tdihevent div.tdihimage div.image{ border: solid 1px #E6E6E6; position: relative; margin: auto; text-align: center; }
div.tdihevent div.tdihimage div.image img.magnify { position: absolute; bottom: 4px; right: 4px; height: 20px; width: 20px; }
div.tdihevent div.tdihimage div.image img.main { width: 130px; margin: 3px 0 1px 0; }
div.tdihevent div.caption { padding-top: 7px; text-align: left; font-size: 70%; color: #990000; }

div.tdihevent h3.title { display: block; margin-left: 160px; border-bottom: solid 1px #CCCCCC; color: #666666; font-size: 125%; font-weight: normal; }
div.tdihevent p.subtitle { font-size: 100%; color: #990000; padding: 0; text-indent: 0; }
div.tdihevent p { padding: 20px 10px 0 0; }
div.tdihevent ol { padding: 0 0 10px 20px; }


div#tdihheader div#tdihcalendar { height: 258px; width: 240px; float: right; text-align: right; }
div#tdihheader div#tdihdate { height: 258px; width: 240px; float: right; text-align: left; }

div#tdihheader table.calendar { margin: 8px 25px auto auto; position: relative;}
div#tdihheader table.calendar th.calendar_header { padding: 5px; font-size: 125%; font-weight: normal; color: #999999; text-align: right; }

div#tdihheader table.calendar th#prev a { display:block; background-image: url(/tdih/img/bckgrnd/prev.jpg); background-repeat: no-repeat; background-position: center 8px; }
div#tdihheader table.calendar th#prev a:hover { background-image: url(/tdih/img/bckgrnd/prev-hover.jpg); }
div#tdihheader table.calendar th#next a { display:block; background-image: url(/tdih/img/bckgrnd/next.jpg); background-repeat: no-repeat; background-position: center 8px; }
div#tdihheader table.calendar th#next a:hover { background-image: url(/tdih/img/bckgrnd/next-hover.jpg); }

div#tdihheader table.calendar td { height: 25px; padding: 0 6px 0 0; width: 24px; color: #666666; font-size: 80%; vertical-align: middle; }

div#tdihheader table.calendar a { display:block; margin-right: -6px; padding: 3px 6px 4px 0; text-decoration: none;}
div#tdihheader table.calendar td.calendar a { color: #666666; }
div#tdihheader table.calendar td.calendar a:hover { background-image: url(/tdih/img/bckgrnd/highlight-bg.jpg); background-repeat: no-repeat; background-position: center bottom; }
div#tdihheader table.calendar td.actday  a { color:#990000; background-image: url(/tdih/img/bckgrnd/today-bg.jpg); background-repeat: no-repeat; background-position: center bottom; }
div#tdihheader table.calendar td.actday a:hover { color:#666666; background-image: url(/tdih/img/bckgrnd/highlight-bg.jpg); background-repeat:no-repeat; background-position: center bottom; }
div#tdihheader table.calendar td.weekend  a { color: #990000; }