@charset "UTF-8"; /* Quirk Gallery CSS Document. Trim-Clarified Visual Communication for Pocket Creative */ html,body {margin:0; padding:0; font-family:Helvetica, sans-serif; color:#888888; background-color:#FFFFFF;} h1, h2, h3, h4, h5, h6, p, pre, blockquote, ol, dl, address{ margin:0;padding: 0; } p {line-height:auto;} ul {list-style-type:square; text-align:left;} h1 {font-size:.8em; font-weight:bold; line-height:1.5em;} h2 {font-size:.8em; font-weight:bold; line-height:1.5em;} h3 {font-size:.8em; font-weight:bold; line-height:1.5em;} a {outline: none;} a img {border: none;} /* MAIN DIVs */ #Container {width:780px; margin:auto;} #Banner {width:780px; height:70px;} #BannerColumn1 {width:100px; height:70px; background-image:url(images/logo_quirk_gallery.gif); float:left;} #BannerColumn2 {width:340px; height:70px; float:left;} #BannerColumn3 {width:340px; height:70px; float:left;} #SpacerColumn3 {width:340px; height:41px; color:#CCCCCC; font-size:.8em; text-align:right; padding-top:5px;} #ContentArea {width:780px;} #ContentArea1 {width:100px; float:left; padding:10px 0 0 0; font-size:.8em;} #ContentArea2 {width:340px; height:auto; float:left; padding:10px 0 0 0;} #ContentArea3 {width:340px; height:auto; float:left; padding:5px 0 0 0;} #ContentAreaQRepresents {width:440px; height:510px; padding:33px 0 10px 0; float:left; background-color:#FFFFFF;} #ContentAreaStaff {width:440px; height:460px; padding:0; float:left; background-color:#FFFFFF;} #Footer {font-family:Helvetica, sans-serif; color:#888888; font-size:.7em; text-align:center; width:780px; padding:25px 0 10px 0; clear:both; margin:auto;} #sharethis {padding-top:10px; clear:both;} #HomeSSP {width:780px; clear:both; height:465px; padding:15px 0 0 0; background-color:#FFFFFF;} #menutemp {padding:12px 0 0 0; font-family:Helvetica, sans-serif; font-size:12px;} #SSPInstructions {padding:10px 0 15px 0; float:left; font-style:italic; font-family:Helvetica, sans-serif; font-size:12px;} /* TEXT CONTENT DIVs */ #Date {width:145px; padding:14px 0px 0 0; float:left;} #Date2 {width:330px; padding:24px 0px 0 0; float:left;} #Title {width:180px; padding:14px 0 0 10px; float:left;} #TitleGeneral {width:340px; padding:14px 0 0 0; clear:both;} #ArtistName {padding:14px 0 0 0; clear:right;} #Text {padding:14px 0 0 0; width:340px; float:left; font-size:.8em; line-height:1.5em;} #Text2 {padding:14px 0 0 0; width:340px; float:left; font-size:.8em; line-height:1.5em;} #Downloads {width:340px; padding:14px 0 0 0; clear:both; font-size:.8em; line-height:1.5em;} #DottedLine { float:left; width:340px; height:4px; background-image:url(images/graphic_dotted_line.gif); background-repeat:no-repeat;} #DottedLine1 { clear:both; width:100%; height:4px; background-image:url(images/graphic_dotted_line.gif); background-repeat:no-repeat;} #DottedLine2 { clear:both; width:100%; height:4px; background-image:url(images/graphic_dotted_line.gif); background-repeat:no-repeat;} #DottedLine3 { clear:both; width:100%; height:4px; background-image:url(images/graphic_dotted_line.gif); background-repeat:no-repeat;} #DottedLine4 { clear:both; width:100%; height:4px; background-image:url(images/graphic_dotted_line.gif); background-repeat:no-repeat;} #DottedLine5 { clear:both; width:100%; height:4px; background-image:url(images/graphic_dotted_line.gif); background-repeat:no-repeat;} #DottedLineLong { clear:both; width:100%; height:10px; background-image:url(images/graphic_dotted_line_long.gif); background-repeat:repeat-x;} #BlankLineLong { clear:both; width:100%; height:20px; color:white;} #BlankLineLong2 { clear:both; width:100%; height:20px; color:white;} /* GALLERIES DIVs */ #SquareImageLarge { width:440px; font-size:.8em;} #SquareImageSmall1 { padding:0; background-color:white; float:left; font-size:.8em} #SquareImageSmall2 { padding:0; background-color:white; float:left; font-size:.8em} #SquareImageSmall3 { padding:0; background-color:white; float:left; font-size:.8em} #SquareImageSmall4 { padding:0; background-color:white; float:left; font-size:.8em} #SquareImageSmall5 { padding:0; background-color:white; float:left; font-size:.8em} #SquareImageSmall6 { padding:0; background-color:white; float:left; font-size:.8em} #SquareImageSmall7 { padding:0; background-color:white; float:left; font-size:.8em} #SquareImageSmall8 { padding:0; background-color:white; float:left; font-size:.8em} #Spacer1px {width:440px; height:1px; padding:0;} #Spacer2px {width:190px; height:1px; padding:0;} #Spacer5px {width:330px; height:5px; padding:0; float:left;} #Spacer5px2 {width:330px; height:10px; padding:0; float:left;} #Spacer35px {width:440px; height:35px; float:left;} #Spacer99px {width:99px; height:330px; float:left;} #Spacer240px {width:240px; height:190px; float:left;} #SpacerQuirky240px {width:240px; height:100px; float:left; padding:14px 0 0 0;} #Spacer280px {width:280px; height:150px; float:left; padding:0px 0 0 0;} #SpacerVertical55px1 {width:1px; height:55px; padding:0; float:left;} #SpacerVertical55px2 {width:1px; height:55px; padding:0; float:left;} #SpacerVertical55px3 {width:1px; height:55px; padding:0; float:left;} #SpacerVertical55px4 {width:1px; height:55px; padding:0; float:left;} #SpacerVertical55px5 {width:1px; height:55px; padding:0; float:left;} #SpacerVertical55px6 {width:1px; height:55px; padding:0; float:left;} #SpacerVertical55px7 {width:1px; height:55px; padding:0; float:left;} #SpacerPast {width:240px; height:210px; float:left;} #SpacerEvents {width:240px; height:190px; float:left;} #SpacerTemplates {width:340px; height:15px; clear:both;} #Like {width:150px; float:left; padding:5px 0 5px 0;} /* REPRESENTS DIVs */ #ContainerArtists {width:340px; height:auto; float:left; padding:5px 0 0 0;} #ArtistList1 {width:113px; float:left; padding:0 0 3px 0; font-size:.7em; line-height:1.4em;} #ArtistList2 {width:113px; float:left; padding:0 0 3px 0; font-size:.7em; line-height:1.4em;} #ArtistList3 {width:113px; float:left; padding:0 0 3px 0; font-size:.7em; line-height:1.4em;} /* ARCHIVE DIVs */ #ArchiveYearGroup {width:440px; height:120px; float:left; padding:0;} #ArchiveYear {width:430px; padding:10px 0 0 0; font-size:1.8em; text-align:right; color:#CCCCCC} #ArchiveContentGroup {width:340px; height:100px; padding:0;} /* CONTACT DIVs */ #StaffName {padding:14px 0 0 0; float:left; font-size:.8em; line-height:1.5em; float:left;} #DirectionsMap {width:440px; height:440px; float:left;} /* APPLIES TO: PAST, PRESS, COMING UP, EVENTS AND STAY QUIRKY DIVs */ #PastContent {width:780px; padding:0; clear:both;} #PastImage {width:190px; height:190px; padding:0; font-size:.8em;} #PastGroup {width:340px; float:left; padding:0;} #PastGroup2 {width:440px; float:left; padding:0;} #PastGroupPast {width:200px; float:left; padding:0;} #PastText {width:340px; float:left; padding:0;} #StayQuirkyImage {width:190px; height:100px; padding:0px 0 0 0; float:left; background-color:#CCCCCC;} #ContactStaffImage {width:150px; height:150px; padding:0px 0 0 0; float:left; background-color:#CCCCCC;} /* LINKS */ .Text a:link {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} .Text a:hover {color:#666666; text-decoration:none;} .Text a:visited {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} .Text2 a:link {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} .Text2 a:hover {color:#666666; text-decoration:none;} .Text2 a:visited {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} .Downloads a:link {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} .Downloads a:hover {color:#666666; text-decoration:none;} .Downloads a:visited {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} .SpacerColumn3 a:link {color:#CCCCCC; font-size:.8em; text-decoration:none;} .SpacerColumn3 a:hover {color:#666666; font-size:.8em; text-decoration:none;} .SpacerColumn3 a:visited {color:#CCCCCC; font-size:.8em; text-decoration:none;} .ArtistList1 a:link {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} .ArtistList1 a:hover {color:#666666; text-decoration:none;} .ArtistList1 a:visited {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} .ArtistList2 a:link {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} .ArtistList2 a:hover {color:#666666; text-decoration:none;} .ArtistList2 a:visited {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} .ArtistList3 a:link {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} .ArtistList3 a:hover {color:#666666;text-decoration:none;} .ArtistList3 a:visited {color:#888888; text-decoration:none; border-bottom:dotted 1px #666666;} /* Logo */ a#logo:link {text-decoration:none; border-bottom:0px} a#logo:visited {text-decoration:none; border-bottom:0px} a#logo:hover {text-decoration:none; border-bottom:0px} a#logo1:link {text-decoration:none; border-bottom:0px} a#logo1:visited {text-decoration:none; border-bottom:0px} a#logo1:hover {text-decoration:none; border-bottom:0px} /* Main Nav */ a#GalleryMenu:link {text-decoration:none; border-bottom:0px} a#GalleryMenu:visited {text-decoration:none; border-bottom:0px} a#GalleryMenu:hover {text-decoration:none; border-bottom:0px} a#About:link {text-decoration:none; border-bottom:0px} a#About:visited {text-decoration:none; border-bottom:0px} a#About:hover {text-decoration:none; border-bottom:0px} a#Shop:link {text-decoration:none; border-bottom:0px} a#Shop:visited {text-decoration:none; border-bottom:0px} a#Shop:hover {text-decoration:none; border-bottom:0px} a#Contact:link {text-decoration:none; border-bottom:0px} a#Contact:visited {text-decoration:none; border-bottom:0px} a#Contact:hover {text-decoration:none; border-bottom:0px} a#Events:link {text-decoration:none; border-bottom:0px} a#Events:visited {text-decoration:none; border-bottom:0px} a#Events:hover {text-decoration:none; border-bottom:0px} /* Galleries */ a#maingallery:link {text-decoration:none; border-bottom:0px} a#maingallery:visited {text-decoration:none; border-bottom:0px} a#maingallery:hover {text-decoration:none; border-bottom:0px} a#shopwall:link {text-decoration:none; border-bottom:0px} a#shopwall:visited {text-decoration:none; border-bottom:0px} a#shopwall:hover {text-decoration:none; border-bottom:0px} a#vault:link {text-decoration:none; border-bottom:0px} a#vault:visited {text-decoration:none; border-bottom:0px} a#vault:hover {text-decoration:none; border-bottom:0px} a#qrepresents:link {text-decoration:none; border-bottom:0px} a#qrepresents:visited {text-decoration:none; border-bottom:0px} a#qrepresents:hover {text-decoration:none; border-bottom:0px} a#past:link {text-decoration:none; border-bottom:0px} a#past:visited {text-decoration:none; border-bottom:0px} a#past:hover {text-decoration:none; border-bottom:0px} /* About */ a#history:link {text-decoration:none; border-bottom:0px} a#history:visited {text-decoration:none; border-bottom:0px} a#history:hover {text-decoration:none; border-bottom:0px} a#space:link {text-decoration:none; border-bottom:0px} a#space:visited {text-decoration:none; border-bottom:0px} a#space:hover {text-decoration:none; border-bottom:0px} a#press:link {text-decoration:none; border-bottom:0px} a#press:visited {text-decoration:none; border-bottom:0px} a#press:hover {text-decoration:none; border-bottom:0px} a#archives:link {text-decoration:none; border-bottom:0px} a#archives:visited {text-decoration:none; border-bottom:0px} a#archives:hover {text-decoration:none; border-bottom:0px} /* Contact */ a#staff:link {text-decoration:none; border-bottom:0px} a#staff:visited {text-decoration:none; border-bottom:0px} a#staff:hover {text-decoration:none; border-bottom:0px} a#directions:link {text-decoration:none; border-bottom:0px} a#directions:visited {text-decoration:none; border-bottom:0px} a#directions:hover {text-decoration:none; border-bottom:0px} a#stayquirky:link {text-decoration:none; border-bottom:0px} a#stayquirky:visited {text-decoration:none; border-bottom:0px} a#stayquirky:hover {text-decoration:none; border-bottom:0px} /* Events */ a#events:link {text-decoration:none; border-bottom:0px} a#events:visited {text-decoration:none; border-bottom:0px} a#events:hover {text-decoration:none; border-bottom:0px} /*–––––––––––––––––––––– QUIRK LOGO ––––––––––––––––––––––*/ /* Up state images */ #logo li.logo {background:transparent url(images/logo_quirk_gallery.gif);} /* Get rid of the bullets and margin */ #logo ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #logo li {float:left;} /* General link styling for each Main Nav button */ #logo a#logo {display:block; width:100px; height:0; padding-top:70px; overflow:hidden; background:transparent url(images/logo_quirk_gallery_yellow_.gif) -103px -73px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #logo a:link, * html #logo a:visited {height:26px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #logo a#logo:hover { background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #logo a:hover {height:26px; he\ight:0;} /*–––––––––––––––––––––– QUIRK LOGO1 ––––––––––––––––––––––*/ /* Up state images */ #logo li.logo1 {background:transparent url(images/logo_quirk_gallery.gif);} /* Get rid of the bullets and margin */ #logo ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #logo li {float:left;} /* General link styling for each Main Nav button */ #logo a#logo1 {display:block; width:100px; height:0; padding-top:70px; overflow:hidden; background:transparent url(images/logo_quirk_gallery_yellow_.gif) -103px -73px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #logo a:link, * html #logo a:visited {height:26px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #logo a#logo1:hover { background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #logo1 a:hover {height:26px; he\ight:0;} /*–––––––––––––––––––––– MAIN NAV ––––––––––––––––––––––*/ /* Up state images */ #menu li.GalleryMenu {background:transparent url(images/MainNav/gallery_downstate.gif); background-repeat:no-repeat;} #menu li.About {background:transparent url(images/MainNav/Page_1_r1_c3.gif); background-repeat:no-repeat;} #menu li.Contact {background:transparent url(images/MainNav/Page_1_r1_c5.gif); background-repeat:no-repeat;} #menu li.Shop {background:transparent url(images/MainNav/Page_1_r1_c7.gif); background-repeat:no-repeat;} #menu li.Events {background:transparent url(images/MainNav/Page_1_r1_c8.gif); background-repeat:no-repeat;} /* Get rid of the bullets and margin */ #menu ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #menu li {float:left;} /* General link styling for each Main Nav button */ #menu a#GalleryMenu {display:block; width:87px; height:0; padding-top:26px; overflow:hidden; background:transparent url(images/MainNav/gallery_upstate.gif) -90px -29px no-repeat;} #menu a#About {display:block; width:61px; height:0; padding-top:26px; overflow:hidden; background:transparent url(images/MainNav/Page_1_r1_b3_f2.gif) -64px -29px no-repeat;} #menu a#Contact {display:block; width:85px; height:0; padding-top:26px; overflow:hidden; background:transparent url(images/MainNav/Page_1_r1_b5_f2.gif) -88px -29px no-repeat;} #menu a#Shop {display:block; width:52px; height:0; padding-top:26px; overflow:hidden; background:transparent url(images/MainNav/Page_1_r1_b7_f2.gif) -55px -29px no-repeat;} #menu a#Events {display:block; width:55px; height:0; padding-top:26px; overflow:hidden; background:transparent url(images/MainNav/Page_1_r1_b8_f2.gif) -58px -29px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #menu a:link, * html #menu a:visited {height:26px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #menu a#GalleryMenu:hover { background-position:0 0; z-index:50;} #menu a#About:hover {background-position:0 0; z-index:50;} #menu a#Contact:hover {background-position:0 0; z-index:50;} #menu a#Shop:hover {background-position:0 0; z-index:50;} #menu a#Events:hover {background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #menu a:hover {height:26px; he\ight:0;} /*–––––––––––––––––––––– MAIN2 NAV ––––––––––––––––––––––*/ /* Up state images */ #menu2 li.GalleryMenu {background:transparent url(images/MainNav/gallery_downstate.gif); background-repeat:no-repeat;} #menu2 li.About {background:transparent url(images/MainNav/Page_1_r1_c3.gif); background-repeat:no-repeat;} #menu2 li.Contact {background:transparent url(images/MainNav/Page_1_r1_c5.gif); background-repeat:no-repeat;} #menu2 li.Shop {background:transparent url(images/MainNav/Page_1_r1_c7.gif); background-repeat:no-repeat;} #menu2 li.Events {background:transparent url(images/MainNav/Page_1_r1_c8.gif); background-repeat:no-repeat;} /* Get rid of the bullets and margin */ #menu2 ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #menu2 li {float:left;} /* General link styling for each Main Nav button */ #menu2 a#GalleryMenu {display:block; width:87px; height:0; padding-top:26px; overflow:hidden; background:transparent url(images/MainNav/gallery_upstate.gif) -90px -29px no-repeat;} #menu2 a#About {display:block; width:61px; height:0; padding-top:26px; overflow:hidden; background:transparent url(images/MainNav/Page_1_r1_b3_f2.gif) -64px -29px no-repeat;} #menu2 a#Contact {display:block; width:85px; height:0; padding-top:26px; overflow:hidden; background:transparent url(images/MainNav/Page_1_r1_b5_f2.gif) -88px -29px no-repeat;} #menu2 a#Shop {display:block; width:52px; height:0; padding-top:26px; overflow:hidden; background:transparent url(images/MainNav/Page_1_r1_b7_f2.gif) -55px -29px no-repeat;} #menu2 a#Events {display:block; width:55px; height:0; padding-top:26px; overflow:hidden; background:transparent url(images/MainNav/Page_1_r1_b8_f2.gif) -58px -29px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #menu2 a:link, * html #menu2 a:visited {height:26px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #menu2 a#GalleryMenu:hover {background-position:0 0; z-index:50;} #menu2 a#About:hover {background-position:0 0; z-index:50;} #menu2 a#Contact:hover {background-position:0 0; z-index:50;} #menu2 a#Shop:hover {background-position:0 0; z-index:50;} #menu2 a#Events:hover {background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #menu2 a:hover {height:26px; he\ight:0;} /*–––––––––––––––––––––– SUB NAV GALLERIES ––––––––––––––––––––––*/ /* Up state images */ #subnavgalleries li.maingallery {background:transparent url(images/SubNavGalleries/SubNav_r1_c1_.gif);} #subnavgalleries li.shopwall {background:transparent url(images/SubNavGalleries/SubNav_r1_c2.gif);} #subnavgalleries li.vault {background:transparent url(images/SubNavGalleries/SubNav_r1_c4.gif);} #subnavgalleries li.qrepresents {background:transparent url(images/SubNavGalleries/SubNav_r1_c6.gif);} #subnavgalleries li.past {background:transparent url(images/SubNavGalleries/SubNav_r1_c9.gif);} /* Get rid of the bullets and margin */ #subnavgalleries ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #subnavgalleries li {float:left;} /* General link styling for each Main Nav button */ #subnavgalleries a#maingallery {display:block; width:52px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNav_r1_b1_f2.gif) -55px -24px no-repeat;} #subnavgalleries a#shopwall {display:block; width:89px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNav_r1_b2_f2.gif) -92px -24px no-repeat;} #subnavgalleries a#vault {display:block; width:54px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNav_r1_b4_f2.gif) -57px -24px no-repeat;} #subnavgalleries a#qrepresents {display:block; width:91px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNav_r1_b6_f2.gif) -94px -24px no-repeat;} #subnavgalleries a#past {display:block; width:45px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNav_r1_b9_f2.gif) -48px -24px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #subnavgalleries a:link, * html #subnavgalleries a:visited {height:21px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #subnavgalleries a#maingallery:hover {background-position:0 0; z-index:50;} #subnavgalleries a#shopwall:hover {background-position:0 0; z-index:50;} #subnavgalleries a#vault:hover {background-position:0 0; z-index:50;} #subnavgalleries a#qrepresents:hover {background-position:0 0; z-index:50;} #subnavgalleries a#past:hover {background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #subnavgalleries a:hover {height:21px; he\ight:0;} /*–––––––––––––––––––––– SUB NAV GALLERIES2 ––––––––––––––––––––––*/ /* Up state images */ #subnavgalleries2 li.maingallery {background:transparent url(images/SubNavGalleries/SubNav_r1_c1_.gif);} #subnavgalleries2 li.shopwall {background:transparent url(images/SubNavGalleries/SubNav_r1_c2.gif);} #subnavgalleries2 li.vault {background:transparent url(images/SubNavGalleries/SubNav_r1_c4.gif);} #subnavgalleries2 li.qrepresents {background:transparent url(images/SubNavGalleries/SubNav_r1_c6.gif);} #subnavgalleries2 li.past {background:transparent url(images/SubNavGalleries/SubNav_r1_c9.gif);} /* Get rid of the bullets and margin */ #subnavgalleries2 ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #subnavgalleries2 li {float:left;} /* General link styling for each Main Nav button */ #subnavgalleries2 a#maingallery {display:block; width:52px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNav_r1_b1_f2.gif) -55px -24px no-repeat;} #subnavgalleries2 a#shopwall {display:block; width:89px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNav_r1_b2_f2.gif) -92px -24px no-repeat;} #subnavgalleries2 a#vault {display:block; width:54px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNav_r1_b4_f2.gif) -57px -24px no-repeat;} #subnavgalleries2 a#qrepresents {display:block; width:91px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNav_r1_b6_f2.gif) -94px -24px no-repeat;} #subnavgalleries2 a#past {display:block; width:47px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNav_r1_b9_f2.gif) -49px -24px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #subnavgalleries2 a:link, * html #subnavgalleries2 a:visited {height:21px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #subnavgalleries2 a#maingallery:hover {background-position:0 0; z-index:50;} #subnavgalleries2 a#shopwall:hover {background-position:0 0; z-index:50;} #subnavgalleries2 a#vault:hover {background-position:0 0; z-index:50;} #subnavgalleries2 a#qrepresents:hover {background-position:0 0; z-index:50;} #subnavgalleries2 a#past:hover {background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #subnavgalleries2 a:hover {height:21px; he\ight:0;} /*–––––––––––––––––––––– SUB NAV GALLERIES PAST ––––––––––––––––––––––*/ /* Up state images */ #subnavpast li.pastmain {background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c1.gif);} #subnavpast li.pastshopwall {background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c3.gif);} #subnavpast li.pastvault {background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c6.gif);} /* Get rid of the bullets and margin */ #subnavpast ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #subnavpast li {float:left;} /* General link styling for each Main Nav button */ #subnavpast a#pastmain {display:block; width:57px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c1_f2.gif) -60px -24px no-repeat;} #subnavpast a#pastshopwall {display:block; width:86px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c3_f2.gif) -89px -24px no-repeat;} #subnavpast a#pastvault {display:block; width:51px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c6_f2.gif) -54px -24px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #subnavpast a:link, * html #subnavpast a:visited {height:21px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #subnavpast a#pastmain:hover {background-position:0 0; z-index:50;} #subnavpast a#pastshopwall:hover {background-position:0 0; z-index:50;} #subnavpast a#pastvault:hover {background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #subnavpast a:hover {height:21px; he\ight:0;} /*–––––––––––––––––––––– SUB NAV GALLERIES PAST2 ––––––––––––––––––––––*/ /* Up state images */ #subnavpast2 li.pastmain {background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c1.gif);} #subnavpast2 li.pastshopwall {background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c3.gif);} #subnavpast2 li.pastvault {background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c6.gif);} /* Get rid of the bullets and margin */ #subnavpast2 ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #subnavpast2 li {float:left;} /* General link styling for each Main Nav button */ #subnavpast2 a#pastmain {display:block; width:57px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c1_f2.gif) -60px -24px no-repeat;} #subnavpast2 a#pastshopwall {display:block; width:86px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c3_f2.gif) -89px -24px no-repeat;} #subnavpast2 a#pastvault {display:block; width:51px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavGalleries/SubNavPast/SubNavPast_r1_c6_f2.gif) -54px -24px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #subnavpast2 a:link, * html #subnavpast a:visited {height:21px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #subnavpast2 a#pastmain:hover {background-position:0 0; z-index:50;} #subnavpast2 a#pastshopwall:hover {background-position:0 0; z-index:50;} #subnavpast2 a#pastvault:hover {background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #subnavpast2 a:hover {height:21px; he\ight:0;} /*–––––––––––––––––––––– SUB NAV ABOUT ––––––––––––––––––––––*/ /* Up state images */ #subnavabout li.history {background:transparent url(images/SubNavAbout/SubNavAbout_r1_c1.gif);} #subnavabout li.space {background:transparent url(images/SubNavAbout/SubNavAbout_r1_c2.gif);} #subnavabout li.press {background:transparent url(images/SubNavAbout/SubNavAbout_r1_c4.gif);} #subnavabout li.archives {background:transparent url(images/SubNavAbout/SubNavAbout_archives_gray.gif);} /* Get rid of the bullets and margin */ #subnavabout ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #subnavabout li {float:left;} /* General link styling for each Main Nav button */ #subnavabout a#history {display:block; width:64px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavAbout/SubNavAbout_r1_c1_f2.gif) -67px -24px no-repeat;} #subnavabout a#space {display:block; width:58px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavAbout/SubNavAbout_r1_c2_f2.gif) -61px -24px no-repeat;} #subnavabout a#press {display:block; width:57px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavAbout/SubNavAbout_r1_c4_f2.gif) -60px -24px no-repeat;} #subnavabout a#archives {display:block; width:81px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavAbout/SubNavAbout_archives_red.gif) -84px -24px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #subnavabout a:link, * html #subnavabout a:visited {height:21px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #subnavabout a#history:hover {background-position:0 0; z-index:50;} #subnavabout a#space:hover {background-position:0 0; z-index:50;} #subnavabout a#press:hover {background-position:0 0; z-index:50;} #subnavabout a#archives:hover {background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #subnavabout a:hover {height:21px; he\ight:0;} /*–––––––––––––––––––––– SUB NAV ABOUT2 ––––––––––––––––––––––*/ /* Up state images */ #subnavabout2 li.history {background:transparent url(images/SubNavAbout/SubNavAbout_r1_c1.gif);} #subnavabout2 li.space {background:transparent url(images/SubNavAbout/SubNavAbout_r1_c2.gif);} #subnavabout2 li.press {background:transparent url(images/SubNavAbout/SubNavAbout_r1_c4.gif);} #subnavabout2 li.archives {background:transparent url(images/SubNavAbout/SubNavAbout_archives_gray.gif);} /* Get rid of the bullets and margin */ #subnavabout2 ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #subnavabout2 li {float:left;} /* General link styling for each Main Nav button */ #subnavabout2 a#history {display:block; width:64px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavAbout/SubNavAbout_r1_c1_f2.gif) -67px -24px no-repeat;} #subnavabout2 a#space {display:block; width:58px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavAbout/SubNavAbout_r1_c2_f2.gif) -61px -24px no-repeat;} #subnavabout2 a#press {display:block; width:57px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavAbout/SubNavAbout_r1_c4_f2.gif) -60px -24px no-repeat;} #subnavabout2 a#archives {display:block; width:81px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavAbout/SubNavAbout_archives_red.gif) -84px -24px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #subnavabout2 a:link, * html #subnavabout2 a:visited {height:21px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #subnavabout2 a#history:hover {background-position:0 0; z-index:50;} #subnavabout2 a#space:hover {background-position:0 0; z-index:50;} #subnavabout2 a#press:hover {background-position:0 0; z-index:50;} #subnavabout2 a#archives:hover {background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #subnavabout2 a:hover {height:21px; he\ight:0;} /*–––––––––––––––––––––– SUB NAV CONTACT ––––––––––––––––––––––*/ /* Up state images */ #subnavcontact li.staff {background:transparent url(images/SubNavContact/SubNavContact_r1_c1.gif);} #subnavcontact li.directions {background:transparent url(images/SubNavContact/SubNavContact_r1_c2.gif);} #subnavcontact li.stayquirky {background:transparent url(images/SubNavContact/SubNavContact_r1_c4.gif);} /* Get rid of the bullets and margin */ #subnavcontact ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #subnavcontact li {float:left;} /* General link styling for each Main Nav button */ #subnavcontact a#staff {display:block; width:54px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavContact/SubNavContact_r1_c1_f2.gif) -57px -24px no-repeat;} #subnavcontact a#directions {display:block; width:90px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavContact/SubNavContact_r1_c2_f2.gif) -93px -24px no-repeat;} #subnavcontact a#stayquirky {display:block; width:89px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavContact/SubNavContact_r1_c4_f2.gif) -92px -24px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #subnavcontact a:link, * html #subnavcontact a:visited {height:21px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #subnavcontact a#staff:hover {background-position:0 0; z-index:50;} #subnavcontact a#directions:hover {background-position:0 0; z-index:50;} #subnavcontact a#stayquirky:hover {background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #subnavcontact a:hover {height:21px; he\ight:0;} /*–––––––––––––––––––––– SUB NAV CONTACT2 ––––––––––––––––––––––*/ /* Up state images */ #subnavcontact2 li.staff {background:transparent url(images/SubNavContact/SubNavContact_r1_c1.gif);} #subnavcontact2 li.directions {background:transparent url(images/SubNavContact/SubNavContact_r1_c2.gif);} #subnavcontact2 li.stayquirky {background:transparent url(images/SubNavContact/SubNavContact_r1_c4.gif);} /* Get rid of the bullets and margin */ #subnavcontact2 ul {margin:0; padding:0; list-style-type:none;} /* Makes the list horizontal */ #subnavcontact2 li {float:left;} /* General link styling for each Main Nav button */ #subnavcontact2 a#staff {display:block; width:54px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavContact/SubNavContact_r1_c1_f2.gif) -57px -24px no-repeat;} #subnavcontact2 a#directions {display:block; width:90px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavContact/SubNavContact_r1_c2_f2.gif) -93px -24px no-repeat;} #subnavcontact2 a#stayquirky {display:block; width:89px; height:0; padding-top:21px; overflow:hidden; background:transparent url(images/SubNavContact/SubNavContact_r1_c4_f2.gif) -92px -24px no-repeat;} /* hack for older versions of IE with incorrect box model */ * html #subnavcontact2 a:link, * html #subnavcontact2 a:visited {height:21px; he\ight:0;} /* Hover state, down state images. This is a straightforward link style that moves the background images into place at the top left of each link */ #subnavcontact2 a#staff:hover {background-position:0 0; z-index:50;} #subnavcontact2 a#directions:hover {background-position:0 0; z-index:50;} #subnavcontact2 a#stayquirky:hover {background-position:0 0; z-index:50;} /* box model hack for older versions of Internet Explorer */ * html #subnavcontact2 a:hover {height:21px; he\ight:0;} /*–––––––––––––––––––––– LIGHTBOX2 ––––––––––––––––––––––*/ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(webyep-system/program/opt/lightbox/images/prevlabel.gif) left 15% no-repeat;} #nextLink:hover, #nextLink:visited:hover { background: url(webyep-system/program/opt/lightbox/images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }