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


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

h1 { background: url(/_common/img/events/hh-events.gif) no-repeat 0 5px; }
h2 { color: #8d8c8c; }

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; }



/* SLIDE IMAGES DIVs 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
div.slideimages { position: relative; margin: auto 0; padding: 0; width: 664px; height: 215px; overflow: hidden; display: block; }
div.slideimages div.images { position: relative; margin: auto auto auto -2px; padding: 0; width: 666px; height: 215px; }
div.slideimages div.captures { position: absolute; left: 0; bottom: 0; right: 0; height: 50px; background-color: #000000; opacity: 0.6; filter:alpha(opacity=60); color: #ffffff; z-index: 100; padding: 5px; text-align: left; font-style: italic; font-weight: bold; }

div.slideimages div.images ul {list-style:none; }
div.slideimages div.images ul li {float:left; display:block; overflow: hidden; border-left: solid 3px #e2e2e2; background-color: #e2e2e2; }

div.slideimages div.images ul li img { cursor: pointer; opacity: 0.4; filter:alpha(opacity=40); z-index: 9000; zoom: 1; }
div.slideimages div.images ul li img:hover { opacity: 1; filter:alpha(opacity=100); cursor: pointer; }
div.slideimages div.images ul li.active img:hover { cursor: default; }
div.slideimages div.images ul li.active img { opacity: 1; filter:alpha(opacity=100); }


/* BENEFITS AND OVERVIEW DIVs 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
div.overview { float: left; display: inline-block; }
div.benefits { width: 200px; float: right; padding: 10px; margin: 20px 0 20px 30px; background-color: #f2f2f2; }
div.benefits h5 { font-size: 100% !important; line-height: 1.4em; font-weight: normal !important; }
div.benefits ul.benefits li { font-size: 70%; list-style: circle; list-style-position: outside; margin-left: 14px; }
div#contentmain { position: relative; }
div#top { position: relative; display: block; }



/* TABS ELEMENTS 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
ul.jtabs { list-style:none; margin:0 0 0 10px !important; padding:0; height:30px; }/* root element for tabs  */
ul.jtabs li { float:left; text-indent:0; padding:0; margin:0 !important; list-style-image:none !important;  }/* single tab */
ul.jtabs li { background: url(/venue/img/tabs/grey.jpg) no-repeat -420px 0; font-size:11px; display:block; height: 30px;  line-height:30px; width: 110px; text-align:center;	text-decoration:none; color:#333333; padding:0px; margin:0px;	position:relative; top:1px; }/* link inside the tab. uses a background image */
ul.jtabs li.active { outline:none; background-position: -420px -62px; }
ul.jtabs li:hover { background-position: -420px -31px; color:#fff; cursor: pointer !important; }/* when mouse enters the tab move the background image */
ul.jtabs li.current, ul.jtabs li.current:hover, ul.jtabs li.current li { background-position: -420px -62px; cursor:default !important; color:#000 !important; }/* active tab uses a class name "current". it's highlight is also done by moving the background image. */

div#tabs { background: url(/venue/img/tabs/content_top.jpg) 0 30px no-repeat;  }
div#scrollable { position:relative; overflow:hidden; width: 684px; }
div#scrollable p.styled { padding: 30px 0; }
div#jpanes { position:absolute; width:20000em;	clear:both;}/* root element for scrollable items. It is absolutely positioned with large width. */
div#jpanes div.panes{ float:left; width:664px; padding: 10px; }/* single item */


/* THE OVERLAYED ELEMENTS 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
a.magnify { position: absolute; bottom: 0; right: 2px; width: 24px; height: 24px; z-index: 10000; zoom: 1; background: url(/_common/img/magnify.png) top left no-repeat; }
a.magnify:hover { cursor: pointer; } 
p.legend { display: block; height: 14px; padding-left: 30px; padding-bottom: 14px; background: url(/venue/space/img/overlay.jpg) left 3px no-repeat;  text-align: left; margin-top: 5px; margin-left: -5px; }


/* AVAILABLE SPACE, GENERAL STYLES
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
div.panes div.floorplan { position: relative; margin: auto; padding-top: 20px; width: 663px; overflow: hidden; }
div#floorplans-main { /*display: none;*/height: 530px; width: 664px; position: relative; overflow: hidden; }
div#floorplans-main div.floorplans-scrolling {  position:absolute; top: 0; left: 0; height:20000em; }	/* floors scroll */
div#floorplans-main div.floor { position: relative; display: block; margin-top: 10px; padding-bottom: 30px; height:490px; }	/* single floor */
div#floorplans h2.title { display: block; width: 664px; height: 25px; border-bottom: 1px dashed #e2e2e2; margin-bottom: 25px !important; }

div.floor a{ display:block; width:9px; height:9px; overflow:hidden; background-color:#FF6633; z-index:1000; color:#FF6633; text-align:center; line-height:9px; font-size:4px; }
div.floor a:hover { background-color: #333333 !important; color: #333333 !important}
div.tooltip { background: transparent url(/venue/img/tabs/tooltip_small.gif) no-repeat 0 0; height:101px; padding: 10px; width:179px; display:none; z-index: 10000;} 
div.tooltip img { width: 180px; }


div.spaceimage { position: relative; margin: auto; padding: 0; cursor: pointer;  }
div.spaceimage a.magnify { position: absolute; bottom: 5px; right: 1px; }
div#grandhall div.spaceimage a.magnify { position: absolute; bottom: 5px; left: 1px; }
div.specification h4 { font-weight: normal !important; font-size: 100%; }
div.plan h4 {  font-weight: normal !important; text-align: right !important; font-size: 100%; }
div.plan img { border: solid #999999 1px; width: 180px; }
div.description { padding: 0 10px 10px 10px; }
div#grandhall div.specification ul { display: inline-block; width: 160px; margin-bottom: 20px !important; }
div.specification { padding: 0 10px 10px 10px; background-color: #f2f2f2; height: 220px; width: 200px; }
div.specification ul { display: inline-block; width: 170px; margin-bottom: 20px !important; }
ul.specification li { font-size: 85%; list-style: circle; list-style-position: outside; margin-left: 14px; }
div.plan { position: relative; width: 182px; padding: 65px 0; }


/* AVAILABLE SPACE NACKGROUND STYLES
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
div#grandhall { background: url(/venue/space/img/grand/tabs/backgroung-grandhall.jpg) right -125px no-repeat; }
div#hahn { background: url(/venue/space/img/hahnauditorium/tabs/backgroung-hahn.jpg) left 60px no-repeat; }
div#gallery { background: url(/venue/space/img/galleryauditorium/tabs/backgroung-gallery.jpg) -50px -110px no-repeat; }
div#noyce { background: url(/venue/space/img/noyceauditorium/tabs/backgroung-noyce.jpg) -60px bottom no-repeat; }
div#boole { background: url(/venue/space/img/booleauditorium/tabs/backgroung-boole.jpg) left -90px no-repeat; }



/* PRINT/PDF/ETC. BUTTONS
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
div.share { position: absolute !important; right: 10px; top: 10px; display: block; height: 25px; text-align: left; padding: 0; z-index: 10000; }
div.share a { display: inline-block; padding-right: 20px; margin-left: 15px; font-size: 11px; cursor: pointer; }
div.share a.pdf { background: url(/_common/img/misc/pdf-mini.gif) right no-repeat; }

h2.title a { display:block; text-align:right !important; padding-right:20px; margin-left:15px; font-size:11px; cursor:pointer; float:right; z-index:10000; border:0; color:#22589D; }
h2.title a.pdf { background: url(/_common/img/misc/pdf-mini.gif) right no-repeat; }
h2.title a.print { background: url(../img/events/print.gif) right no-repeat; }
h2.title span { cursor:pointer; display:inline-block; float:left; padding-left:15px; margin:0 18px 0 8px; background: url(/venue/space/img/floorplan-notactive.gif) no-repeat 0 7px; }
h2.title span.current { background: url(/venue/space/img/floorplan-active.gif) no-repeat 0 7px; color: #22589d; }

div.floorplan a.pdf 
{ background: url(/_common/img/misc/pdf-mini.gif) right center no-repeat; display:block; position:absolute; bottom:32px; right:15px; padding-right:25px; border:0; color:#22589D; }


/* vendors layout, elements of  catering page */
div.panes div.caterers {width: 180px; float: right; padding: 10px 20px; margin: 20px 0 20px 30px; background-color: #f2f2f2; }
div.panes div.caterers ul.caterers li { font-size: 85%; list-style: none; }
div.panes div.caterers ul.caterers li.title { padding-top: 10px;  }
div.panes div.allCaterers ul.caterers li { font-size: 85%; list-style: none; }
div.panes div.allCaterers ul.caterers li.title { padding-top: 10px;  }
div.panes ul.caterer { display: inline-block; width: 205px; padding: 5px !important;  margin: 0 7px 10px 0 !important; float: left; background: #f2f2f2; }
div.panes ul.catererlast { display: inline-block; width: 205px; padding: 5px !important;  margin: 0 0 10px 0 !important; float: left; background: #f2f2f2; }
div.panes ul.caterer li, div.panes ul.catererlast li { padding: 0 10px 0 0; font-size: 85%; list-style: none;  }
div.panes h4 { margin: 15px 0 10px !important; }


/* FAQS ELEMENTS 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#faq, #requirements { margin: 20px 0;  }
#faq a.question, #requirements a.title { display: block; padding: 10px 0 5px 0; margin: 15px 10px 0 10px; font-size: 125%; cursor: pointer; border-bottom: #f2f2f2 1px solid; }
#faq p.answer, #requirements p.requirements { display: none; padding: 20px 10px 10px; }



/* EASY SLIDER 1.7 ELEMENTS STYLES
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
div#slide_holder { background:url(/venue/img/images/loading.gif) #f2f2f2 326px 109px no-repeat; height: 250px; width: 684px; overflow: hidden; position: relative; text-align: left;  z-index: 100; }
div#slide_holder li { width:684px; height:250px; overflow:hidden; }	
div#slide_holder ul, div#slide_holder ul li { margin:0; padding:0; list-style:none; position: relative; }
div#slide_holder ul li span.descriptionBox { position: absolute; top: 0; left: 0; z-index: 200; padding: 5px 10px; width: 674px !important; background: #333333; opacity: 0.8; filter:alpha(opacity=80); }
div#slide_holder ul li span.descriptionText { color: #f2f2f2; font-size: 11px !important; }
		

/* numeric controls */	
div#slideshowcontrols { width: 679px; height: 12px; z-index: 1000; position: absolute; top: 310px; padding-right: 5px; }
ol#controls{ float: right; padding:0; z-index: 10000; list-style:none;}
ol#controls li{ display:block; float:left; margin-left:5px; text-align:center; font-size:4px !important; background: url(/venue/img/tabs/controls-default.jpg) 2px 2px no-repeat; }
ol#controls li a{ display: block; height: 12px; width: 12px; line-height: 12px; color:#ffffff!important; text-decoration:none; }
ol#controls li.current { background: url(/venue/img/tabs/controls-current.jpg) 0 0 no-repeat;  }
ol#controls li.current a{ color:#FF6633 !important; }
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}