/* 
 * common.css, 2.0 2009-Oct-15
 *
 * (c) 2007 Computer History Museum		http://www.computerhistory.org
 *
 * Edit according to styleguide
 *
 */
html,body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { border: 0; }
body { margin: 0; padding: 0; font-family: verdana,arial,helvetica,sans-serif; font-size: .75em; line-height: 1.4em; background-color: #efefef; text-align: center; }
a {  color: #22589d; text-decoration: none; outline: none; cursor: pointer; }
a.pdf { display:inline-block; background: url(/_common/img/misc/pdf-mini.gif) right 2px no-repeat; padding-right: 20px; border-bottom: 1px dashed #0070ff; }
a.pdf:hover { color: #222222; border-bottom: 1px dashed #222222; }
a.resourcelink { background: url("/_common/img/icon-web.gif") no-repeat scroll left 8px transparent; border-bottom: 1px solid #F2F2F2; cursor: pointer; display: block; margin: 5px 20px 0 0px; padding: 5px 0 0 25px; }
a.resourcelink:hover {  color: #222222; }
a.pdflink { background: url("/_common/img/misc/pdf-mini.gif") no-repeat scroll left 5px transparent; border-bottom: 1px solid #F2F2F2; cursor: pointer; display: block; margin: 5px 20px 0 0px; padding: 5px 0 0 25px; }
a.pdflink:hover {  color: #222222; }
a.wdoclink { background: url("/_common/img/misc/worddoc-mini.gif") no-repeat scroll left 5px transparent; border-bottom: 1px solid #F2F2F2; cursor: pointer; display: block; margin: 5px 20px 0 0px; padding: 5px 0 0 25px; }
a.wdoclink:hover {  color: #222222; }

a.innerlink { background: url("/_common/img/icon-linkin-grey.gif") no-repeat scroll left 10px transparent; border-bottom: 1px solid #F2F2F2; cursor: pointer; display: block; margin: 5px 20px 0 0px; padding: 5px 0 0 25px; }
a.innerlink:hover {  color: #222222; }
a.museumslink { display: block; padding: 5px 0 0 25px; background: url(/_common/img/icon-web.gif) no-repeat left 8px; margin: 5px 20px 0 0; cursor: pointer; border-bottom: #f2f2f2 1px solid; }
p { margin-bottom: 7px }
.warning { display: block; background-color:#FFF9D0; margin: 20px 0px; background-image: none; padding:10px 20px; font-size: 12px; color: #222222; border-bottom: 2px solid #FFCC00; }
ul.warning { margin: 10px 0px; }


/* MAIN LAYERS AND ELEMENTS 
-------------------------------------------------------------- */

#page { width: 960px; background: url(/_common/img/bodybg.png) repeat-y #FFFFFF; margin: 18px auto 0 auto; text-align: left; } 
#header { width: 960px; height: 105px; background-color: #ffffff; background: url(/_common/img/headerbg.jpg) repeat-y; display: block; }

#menunav { position: relative; width: 960px; height: 30px; font-size: .9em; line-height: 2.6em; background: url(/_common/img/menubg.png) repeat-x; background-color: #000000; color: #e6e6e6; }
#searchinput { position: absolute; top: 7px; left: 479px; width: 182px; height: 14px; padding: 0 4px; color: #781351; color: #474646; background: #faeec7; background: #ccc; border: 1px solid #efefef; font-size: 1.2em; }
#searchicon {position: absolute; top: 0; left: 671px; width: 30px; height: 30px; z-index: 9999;}
#searchform label { color: #999999; display: none; }
#searchform { margin: 0; padding: 0; }
#searchform fieldset { margin: 0; padding: 0; border: 0; }
input#searchinput[type="text"]:focus#searchinput { border: 1px solid #fff; background:#fff; background: #eee; color:#13465F; }
#quicklinks { position: absolute; top: 0; left: 670px; width: 260px; padding-right: 30px; text-align: right; color: #ffffff; }
#quicklinks a { color: #ccc; text-decoration: none; padding: .2em .5em; }
#quicklinks a:hover { color: #acacac; color: #fff; }
#menunav #search { font-size: .8em; }

#banner { position: relative; width: 960px; height: 75px; background-color: #ffffff; }
#logo { position: absolute; top: 4px; left: 5px; }
#chmbuilding { position: absolute; top: 0; left: 565px;}

#globalnav { position: absolute; top: 55px; left: 0; height: 20px; }
#globalnav .globalnav { padding: 0 0; margin: 0 auto; list-style-type: none; background: #ffffff; }
#globalnav .globalnav li { float: left; width:95px; margin-right: 1px; }
#globalnav .globalnav a { display: block; float: left; padding: 0 0; width:95px; color:#efefef; line-height: 20px; font-size: .9em; text-align: center; text-decoration: none; }
#globalnav .globalnav a:hover, #globalnav a.active { color:#ffffff; }

#globalnav #visitus { background: #365F82; }
#globalnav #visitus a:hover, #globalnav #visitus .active { background: url(/_common/img/globalnav-hl-visitus.png); }

#globalnav #exhibits { background: #900000; }
#globalnav #exhibits a:hover, #globalnav #exhibits .active { background: url(/_common/img/globalnav-hl-exhibits.png); }

#globalnav #explore { background: #ff9900; }
#globalnav #explore a:hover, #globalnav #explore .active { background: url(/_common/img/globalnav-hl-explore.png); }

#globalnav #getinvolved { background: #3f5b2a;  }
#globalnav #getinvolved a:hover, #globalnav #getinvolved .active { background: url(/_common/img/globalnav-hl-getinvolved.png); }

#globalnav #venuerental { background: #5e5e5e; }
#globalnav #venuerental a:hover, #globalnav #venuerental .active { background: url(/_common/img/globalnav-hl-venuerental.png); }

#globalnav #education { background: #5e5e5e; }
#globalnav #education a:hover, #globalnav #education .active { background: url(/_common/img/globalnav-hl-venuerental.png); }

#globalnav #events { background: #3b9eb8;}
#globalnav #events a:hover, #globalnav #events .active { background: url(/_common/img/globalnav-hl-events.png); }

#globalnav #atchm { background: #B1A481;}
#globalnav #atchm a:hover, #globalnav #atchm .active { background: url(/_common/img/globalnav-hl-atchm.png); }

#content { float: right; width: 740px; font-size: 1.08em; line-height: 1.4em; color: #5B5B5B; padding-bottom: 50px; }


/* LOCAL NAV
-------------------------------------------------------------- */

#localnav { float: left; width: 220px; display: block; padding: 5px 0 50px 0; }
#localnav img { margin-left: 10px; margin-top: 15px; }
.localnav li { display:block; width: 218px; margin-left: 1px; border-bottom: 1px solid #efefef; text-align: left; font-family: arial; overflow: hidden; }
.localnav li a { display: block;  color: #3e3e3e; text-decoration: none; line-height: 20px; font-size: 1em; float: left; width: 218px; }
.localnav li a { background: url(/_common/img/localnav-listicon-off.gif) no-repeat; background-position: 18px 7px; padding-left: 30px; } 
.localnav li a.inner-redirect img { padding-left: 7px !important; } 
.localnav li .active { color: #3e3e3e; background: #ccc url(/_common/img/localnav-listicon-on.gif) no-repeat; background-position: 18px 7px;}
.localnav li a:hover { color: #000; background: #ccc url(/_common/img/localnav-listicon-on.gif) no-repeat; background-position: 18px 7px; } 

/* FOOTER
-------------------------------------------------------------- */

#footer { width: 960px; height: 30px; font-size: .8em; line-height: 2.5em; background-color: #efefef; color: #6e6e6e; display: block; padding-bottom: 20px; }
#footer #navigation a { color: #6e6e6e; text-decoration: none; }
#footer #navigation a:hover { color: #4366a9; }
#footer #copyright {float: left; }
#footer #navigation {float: right; }


/* HEADINGS
-------------------------------------------------------------- */
h1 { font-weight: normal; font-size: 1.6em; letter-spacing: -1px; margin: 2px 0 30px; padding: 2px 0 2px 15px; line-height: 1.1em; } 
h2 { clear: both; padding: 0; color: #333333; font-size: 1.3em; font-weight: normal; margin: 1.5em 0 10px; }
h3 { font-size: 0.75em; line-height: 1.125em; margin: 0; font-weight: bold; } 
h4 { font-size: 0.75em; line-height: 1.125em;  margin: 0; font-weight: normal;	color: #666;} 
h5, h6 { font-size: 0.75em; line-height: 1.125em; margin: 0; font-weight: normal; }

p.author { display: block; margin: -30px 0 25px 20px; padding-left: 20px; background: url(/_common/img/misc/icon-author.gif) 1px 4px no-repeat; height: 16px; line-height: 16px; color: #666666; font-size: 12px; font-weight: 100; }
p.videoinfo { display: block; margin: -30px 0 25px 20px; height: 16px; line-height: 16px; color: #222222; font-size: 12px; font-weight: 100; }


/* IMAGES	
-------------------------------------------------------------- */
.image { border: 1px solid #c0c0c0; padding: 1px 1px;}
.imagecaption { font-size: .8em; font-style: normal; color: #333333; line-height: 1.4em; }
.imagecredit { font-size: .7em; font-style: italic; color: #999999; line-height: 1.1em; }

.imageleft { float: left; margin-right: 20px; }
.imageright { float: right; margin-left: 20px; }


/* html 5 compatability
---------------------------------------------------------- */
.display-block { display: block !important; }
.display-inline-block { display: inline-block !important; }

/*	Lists
-------------------------------------------------------------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: inline; margin: 0 6px 0 0; }
ul.bullets { list-style-type:none; margin:0; padding-left:9px; }
ul.bullets li { background: url(http://www.computerhistory.org/_common/img/list-bullet.gif) 0px 7px no-repeat; padding-left:0.8em; }

	

/* clearfix hack
---------------------------------------------------------- */
.clearfix:after, .page:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix, .page { display: inline-block; }
html[xmlns] .clearfix, html[xmlns] .zp-wrapper { display: block; }
* html .clearfix, * html .zp-wrapper { height: 1%; }


/* TYPOGRAPHY 
---------------------------------------------------------- */
.t-orange { color: #ff6633 !important; }
.t-lightorange { color: #FF9900 !important; }
.t-blue { color: #36377c !important; }
.t-darkblue { color: #475e80 !important; }
.t-lightblue { color: #2b7c93 !important; }
.t-gray { color: #8d8c8c !important; }
.t-green { color: #006600 !important; }
.t-red { color: #900 !important; }
.t-volunteer { color: #1d9442 !important; }
.t-light { color: #ffffff !important; }
.f-normal { font-weight: normal !important; }
.f-bold { font-weight: bold !important; }
.f-italic { font-style: italic !important; }




/* ICONS
---------------------------------------------------------- */
.iconphone { background: url(/_common/img/icon-phone.gif) 0 center no-repeat; padding-left: 20px; }
.iconemail { background: url(/_common/img/icon-email.gif) 0 center no-repeat; padding-left: 20px; }
.icondownload { background: url(/_common/img/icon-download.png) 0 center no-repeat; padding-left: 20px; }
.iconweb { background: url(/_common/img/icon-web.gif) 0 center no-repeat; padding-left: 20px; }
.iconlinkin { background: url(/_common/img/icon-web.gif) right center no-repeat; padding-right: 20px; }


/* bluetable 
---------------------------------------------------------- */
table.bluetable { border: 0; padding: 7px 0; width: 684px; }

table.bluetable td { background: #f2f2f2; text-align: center; padding: 2px 0; }
table.bluetable .header { background: #BCD1E2; padding: 2px 0; color: #365f82; font-weight: bold; font-size: .7em; letter-spacing: 1px; text-align: center;}
table.bluetable .headerdg { background: #e0e0e0; text-align: left; font-size: .9em; text-align: left; background: #e0e0e0; padding: 2px 5px; }

table.bluetable .data td { font-size: .9em; padding: 7px 0; font-size: .9em;}
table.bluetable .data .time { color: #000000; }
table.bluetable .data .ampm { font-size: .8em; }
table.bluetable .details { text-align: center; padding: 7px 0;}
table.bluetable .normaltext td {text-align: left; padding: 5px 0 5px 10px; }

table td.sevencol { width: 95px }
table td.threecol { width: 240px }
table td.twocol { width: 342px }




/* OVERLAYED LAYERS 
-------------------------------------------------------------- */
.overlay { display:none; z-index:10000; background-color:#DBDBDB; min-width:600px; min-height:400px; border:10px solid #DBDBDB; }
.overlay .close { background:url(/volunteers/images/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px; }
.overlay .progress { position:absolute; top:50%; left:50%; display:none; } 
.overlay .next, .overlay .prev { position:absolute; top:50%; border:1px solid #999999; cursor:pointer; display:block; padding:10px 20px; color:#f2f2f2; font-size:1em; }
.overlay .prev { left:0; border-left:0; -moz-border-radius-topleft:0; -moz-border-radius-bottomleft:0; -webkit-border-bottom-left-radius:0; -webkit-border-top-left-radius:0; }
.overlay .next { right:0; border-right:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:0; -webkit-border-bottom-right-radius:0; -webkit-border-top-right-radius:0; }
.overlay .next:hover, .overlay .prev:hover { text-decoration:underline; background-color:#666666; }
.overlay .next, .overlay .prev, .overlay .info { background:#666666 !important; background:rgba(0, 0, 0, 0.6) url(/img/global/gradient/h80.png) repeat-x; }
.disabled {	visibility:hidden; }
.overlay .info { position:absolute;	bottom:0; left:0; padding:10px 15px; color:#f2f2f2; font-size:1em; border-top:1px solid #666666; }
.overlay .info strong { display:block; }