sacdman
Coder
Hi everyone. I am new here and just looking for assistance for my website. This site I built back in 2002 but this is also a site that is responsive and works even on tablets. The hard part is adapting it to the viewport for a cellphone. My current right side menu is far too large for a cellphone. I have used Media Queries so that this menu disappears when it is viewed on a cellphone, but now I need a menu that will work on a cellphone. My challenge is adding such a menu to this site. I have tried but without any real success. I am not sure if updating this is actually hard to do, or if it is something simple I am missing. Please let me know if I am not posting about this issue correctly. I am including the full coding for one HTML page and for the CSS which applies to every page on the site. I am also including pictures in those spots which I feel where the CSS and HTML for slideout menu would appear to be the best place to add that. I would prefer a slideout menu coming from the right side of the page. I know that the wall of code is not considered a good idea, but with photos you can see where I have marked to put in the code for a menu and the css. I am not sure just how to integrate a CSS menu into this site as it is. I have marked the image of the page where I think a hamburger button or something similar would go for a side menu. I have also marked the css section where I have an SSI for the current menu. Would be nice if the menu could switch from one to another when viewport changes. Any and all suggestions are appreciated and I hope I posted this correctly. Thanks again for viewing this thread.
Code:
<!DOCTYPE html>
<html lang= "en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The number one Benny Hill website, Benny's Place featuring Louise English and Hill's Angels">
<meta name="author" content="threerandot">
<link rel="icon" href="error.html">
<link rel="stylesheet" type="text/css" href="benny.css" media="screen">
<title>Benny's Place • Original Series, Episodes 1 - 11</title>
</head>
<body>
<a name="top"></a>
<div id="header">
<div class="title">Benny's Place Featuring Louise English & Hill's Angels</div>
<div id="holder">
<div id="content">
<div class="buttons">
<span class="home">
<a href="index.html">
<img src="home.gif" width="32" height="32" alt="Go to The Home Page" title="Go to The Home Page"></a></span>
<span class="map">
<a href="sitemap.html">
<img src="map.gif" width="32" height="32" alt="Go to The Site Map Page" title="Go to The Site Map Page"></a></span>
<span class="links">
<a href="links.html">
<img src="link.gif" width="32" height="32" alt="Go to The Links Page" title="Go to The Links Page"></a></span>
<span class="book">
<a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-15426-ca" title="Read or Leave A Message in The Guestbook" target="_blank"><img src="book.gif" width="32" height="32" alt="Read or Leave a Message in The Guestbook"></a></span>
<span class="search">
<a href="search.html" title="Go the Search Page" target="_blank"><img src="glass.gif" width="32" height="32" alt="Go the Search Page"></a></span>
</div>
<h1>The Benny Hill Show<br>
Original Series<br>
(1969-1971)</h1>
<p class="three">Navigation:
<a href="original01.html" title="Details for Episodes 1 - 11">1</a>
<a href="original02.html" title="Details for Episodes 12 - 21">2</a>
<a href="original03.html" title="Details for Episodes 22 - 31">3</a>
<a href="original04.html" title="Details for Episodes 32 - 41">4</a>
<a href="original05.html" title="Details for Episodes 42 - 50">5</a>
<a href="original06.html" title="Details for Episodes 51 - 58">6</a>
<a href="original02.html" title="Next Page">Next Page</a></p>
<div class="entry">
<p class="pic">
<img src="show01.jpg" width="140" height="140" alt="The Benny Hill Show" title="The Benny Hill Show"></p>
<h2>Page 1 (Episodes 1 - 11)</h2><p>The Benny Hill Show was not a weekly series, but was aired as specials several times a year. For syndication, all of these specials were put together as thirty minute shows. This page contains the sketches as they originally appeared on The Benny Hill Show from 1969-1971. You can also spot the Production Code Numbers and Recording Dates in the headings for the shows. Special Thanks to William Brown. The breaks for these episode were contributed by our associate contributor, David Hawkins, based on the <a href="annuals.html" title="Go to the Benny Hill Show Region 2 DVD Releases page">Region 2 DVD Releases</a>. We can now see how the shows were aired with their commercial spots. Thanks, David!</p>
</div>
<div class="episode">
<h2>Episode 1</h2>
<p>(Nov. 19, 1969)</p>
<p>Color [52:20]</p>
<p>VTR 2306 (recorded Oct. 12, 1969)</p>
</div>
<ol>
<li>Benny Quickie: Ye Olde Wishing Well</li>
<li>Opening and Ballad: "Anna-Marie"</li>
<li>Benny's Bloopers</li>
<li>Sound Delay Interview</li>
<li>The Ladybirds: "Your Secret Love"</li>
<li>The Russian Zone<br>
<strong>Break</strong></li>
<li>Lower Tidmarsh Hospital Service</li>
<li>Mrs. Fripp: ITV's Most Loyal Viewer<br>
<strong>Break</strong></li>
<li>European Song Contest</li>
<li>Close: The Age Of Aquarius (not in the menu)</li>
</ol>
<div class="episode">
<h2>Episode 2</h2>
<p>(Dec. 25, 1969)</p>
<p>Color [50:58]</p>
<p>VTR 2308 (recorded Nov. 30, 1969)</p>
</div>
<ol>
<li>Benny Quickie: Fishing</li>
<li>Opening and Ballad: "Juanita Bonita Delores"</li>
<li>Holiday Sports Spectacular<br>
<strong>Break</strong></li>
<li>Benny Quickie: Peeping Ben</li>
<li>The Ladybirds: "Can't Take My Eyes Off You"</li>
<li>The Short Happy Life of Maurice Dribble<br>
<strong>Break</strong></li>
<li>Benny's Bloopers</li>
<li>Miss Eira Heath: "Wedding Cake"</li>
<li>Is This Your Life?</li>
<li>Close: The Age Of Aquarius (not in the menu)</li>
</ol>
<div class="episode">
<h2>Episode 3</h2>
<p>(Feb. 4, 1970)</p>
<p>Color [50:30]</p>
<p>VTR 2307 (recorded Nov. 9, 1969)</p>
</div>
<ol>
<li>Benny Quickie: Black Moor</li>
<li>Opening and Ballad: "Colleen"</li>
<li>Naked Audition</li>
<li>Luis Alberto del Parana and Los Paraguayos</li>
<li>Hotel Sordide<br>
<strong>Break</strong></li>
<li>Tour Guide</li>
<li>Ballet Company with Audience Commentary</li>
<li>Miss Eira Heath: "Carnival"</li>
<li>Making a Commercial<br>
<strong>Break</strong></li>
<li>The Old Fiddler</li>
<li>Benny's Bloopers</li>
<li>Tommy Tupper in Tupper-Time</li>
<li>Benny's Ballad: "Girls of the Sousa Bar"</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>
<div class="episode">
<h2>Episode 4</h2>
<p>(Mar. 11, 1970)</p>
<p>Color [51:26]</p>
<p>VTR 2309 (recorded Feb. 15, 1970)</p>
</div>
<ol>
<li>Benovite / Opening and Ballad: "My Garden of Love"</li>
<li>The Hitch Hiker</li>
<li>Fred Scuttle: TV Audience Researcher</li>
<li>Rogue Nudist<br>
<strong>Break</strong></li>
<li>Benny's Bloopers</li>
<li>The Ladybirds: "The Girl is in Love with You"</li>
<li>Benny's Ballad: "Golden Days"<br>
<strong>Break</strong></li>
<li>Benny Quickie: One-Man Band Monk</li>
<li>Cotillion Dancing</li>
<li>The Birds and the Bees</li>
<li>The Sound of Frankenstein</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>
<div class="episode">
<h2>Episode 5</h2>
<p>(Oct. 28, 1970)</p>
<p>Color [50:44]</p>
<p>VTR 3454 (recorded Oct. 22, 1970)</p>
</div>
<ol>
<li>Benny Quickie: Park Bench</li>
<li>Benny's Ballad: "Suitcase on the Train"</li>
<li>Benny Quickies: Comic Look No.7</li>
<li>Boutique Mask Dance</li>
<li>Los Zafiros</li>
<li>The Bill Stickers<br>
<strong>Break</strong></li>
<li>Benny Quickie: British Arms</li>
<li>Benny's Bloopers</li>
<li>Fred Scuttle: Mr. Show Business</li>
<li>The Underworld Water of Jacques Custard<br>
<strong>Break</strong></li>
<li>Wind of Change</li>
<li>Two's Company: "September Song"</li>
<li>Chow-Mein: East Meets West</li>
<li>Ted</li>
<li>Benny's Ballad: "Jose's Cantina"</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>
<div class="episode">
<h2>Episode 6</h2>
<p>(Dec. 23, 1970)</p>
<p><abbr title="Black and White">B&W</abbr> [48:18]</p>
<p>VTR 3455 (recorded Nov. 19, 1970)</p>
</div>
<ol>
<li value="1">Benny Quickie: Rubber Balloons</li>
<li>Benny's Ballad: Broken-Hearted Lover's Stew</li>
<li>Benny Quickie: The Unexpected Look</li>
<li>Fred Scuttle: Scuttle Tours</li>
<li>"Grand Pappy Blueberry" and Benny's Ballad: "Rachel"<br>
<strong>Break</strong></li>
<li>Benny Quickie: Bank Robbery</li>
<li>Benny's Bloopers</li>
<li>Trisha Noble: "I'm Leaving on a Jet Plane"</li>
<li>A Tribute to the Lower Tidmarsh Volunteer Fire Brigade<br>
<strong>Break</strong></li>
<li>Opportunity's Knocking</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>
<div class="episode">
<h2>Episode 7</h2>
<p>(Jan. 27, 1971)</p>
<p><abbr title="Black and White">B&W</abbr> [51:23]</p>
<p>VTR 3456 (recorded Dec. 17, 1970)</p>
</div>
<ol>
<li>Benny Quickie: Very Well, M'Lady</li>
<li>Benny's Ballad: "Flying South"</li>
<li>Shameful Moments of Sport</li>
<li>Petticoat and Vine: "World of Love and Laughter"</li>
<li>Henry and Alice and Bob and Mary<br>
<strong>Break</strong></li>
<li>Benny's Bloopers</li>
<li>Kiki Dee: "You Made Me So Very Happy"</li>
<li>Crime Does Not Pay<br>
<strong>Break</strong></li>
<li>Love Will Find A Way</li>
<li>Top of the Tops</li>
<li>Close: The Age Of Aquarius (not in the menu)</li>
</ol>
<div class="episode">
<h2>Episode 8</h2>
<p>(Feb. 24, 1971)</p>
<p><abbr title="Black and White">B&W</abbr> [47:56]</p>
<p>VTR 3457 (recorded Jan. 28, 1971)</p>
</div>
<ol>
<li>Benny Quickie: Copy The Boss</li>
<li>Benny's Ballad: "Pretty Greek Girl"</li>
<li>Undercover Sanitary Inspector</li>
<li>Reverend Gray<br>
<strong>Break</strong></li>
<li>Benny's Bloopers</li>
<li>Nanette: "Everybody's Singing, Like Now"</li>
<li>Learning All the Time!<br>
<strong>Break</strong></li>
<li>Benny Quickie: Night George!</li>
<li>Uplift with Humphrey Bumphrey</li>
<li>Benny's Ballads: "Pepys' Diary" & "Lady Mary"</li>
<li>Close: "Lady Mary" & Yakkety Sax (not in the menu)</li>
</ol>
<div class="episode">
<h2>Episode 9</h2>
<p>(Mar. 24, 1971)</p>
<p>Color [50:24]</p>
<p>VTR 4000 (recorded March 4, 1971)</p>
</div>
<ol>
<li>Benny Quickie: Unfaithful Wife</li>
<li>Benny's Ballad: "The Egg Marketing Board Tango"</li>
<li>French For Starters</li>
<li>The Messenger</li>
<li>The Grass Is Greener<br>
<strong>Break</strong></li>
<li>Supermarket Dance</li>
<li>Benny Reveals All... about television!</li>
<li>The Ladybirds: "Close To You"</li>
<li>Cinema: The Vintage Years<br>
<strong>Break</strong></li>
<li>Benny's International Bloopers</li>
<li>The Westminister Funsters</li>
<li>Chow-Mein and Cookie in the Restaurant</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>
<div class="episode">
<h2>Episode 10</h2>
<p>(Nov. 24, 1971)</p>
<p>Color [50:22]</p>
<p>VTR 4882 (recorded Oct. 14, 1971)</p>
</div>
<ol>
<li>Benny Quickie: Hotel Lift</li>
<li>Benny's Ballad: "The Beach at St. Tropez"</li>
<li>Benny's Bloopers</li>
<li>New England 1635</li>
<li>Chow-Mein: At Home with Henry McGee<br>
<strong>Break</strong></li>
<li>St. John Bossom: Poet</li>
<li>Cruising on the S.S. Rumpo</li>
<li>The Ladybirds: "River Deep, Mountain High"</li>
<li>Fun in the Kitchen with Johnny & Cranny Faddock<br>
<strong>Break</strong></li>
<li>The Movie Shakers: Mervyn Cruddy</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>
<div class="episode">
<h2>Episode 11</h2>
<p>(Dec. 22, 1971)</p>
<p>Color [50:08]</p>
<p>VTR 4883 (recorded Nov. 4, 1971)</p>
</div>
<ol>
<li>Benny Quickie: Pub Bore</li>
<li>Benny's Ballad: "Gypsy Rock"</li>
<li>Fred Scuttle: Chief Drama Director and Dialogue Coach<br>
<strong>Break</strong></li>
<li>The Dimpton Drinking Club</li>
<li>The Ladybirds: "Say A Little Prayer"</li>
<li>News At Ten with Reginald Boozenquet<br>
<strong>Break</strong></li>
<li>The Great Pretender</li>
<li>Benny's International Bloopers</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>
<p class="three">Navigation:
<a href="original01.html" title="Details for Episodes 1 - 11">1</a>
<a href="original02.html" title="Details for Episodes 12 - 21">2</a>
<a href="original03.html" title="Details for Episodes 22 - 31">3</a>
<a href="original04.html" title="Details for Episodes 32 - 41">4</a>
<a href="original05.html" title="Details for Episodes 42 - 50">5</a>
<a href="original06.html" title="Details for Episodes 51 - 58">6</a>
<a href="original02.html" title="Next Page">Next Page</a></p>
<p class="footer"><a href="#top" title="Return to the Top of this page">Top Of Page</a><br>
<a href="mailto:[email protected]?Subject=&body=Re_Benny_Hill" title="Send emails to [email protected] and please include Re Benny Hill in the body of the message. Thank You.">Contact William</a><br>© April 06, 2002.</p>
</div></div></div>
<div id="right"><div id="menu"><!--#include virtual="navigation.html" --><div class="entry"><p>Webmaster: threerandot<br>Contributing Editor:<br>William Brown<br>Associate Editor:<br>David Hawkins</p></div><p>Printing pages:<br>All pages are now printable throughout the site, except for Photo Galleries. I cannot guarantee perfect results. Use 'Print Preview' to see how your browser renders a given page before printing.</p>
</div></div></body></html>
CSS:
body{background:#9cf url(tvworkoutbackground.jpg) top right no-repeat;color:#000;font-family:arial,verdana,serif;font-variant:small-caps;padding:0;margin:0;height:100%}#header{color:#000;background:url(decor.jpg) #9cf repeat-y;margin:0 240px 0 20px;padding:10px 10px 30px 70px;border:none;height:500%;font:small-caps bold 135% arial,verdana,serif}#holder{position:relative;background:#09c;color:#fff}#content{position:relative;color:#FFF;letter-spacing:1px;padding:15px;margin:15px 0 0 0; border:#0FC medium ridge;top:-10px;left:10px;height:100%;background:#069;font:normal bold 70% verdana,arial,serif}#right{position:absolute;top:220px;right:20px;padding:0;margin:0;width:200px;font:normal bold 80% verdana,arial,serif;background:#9cf;color:#000}
#menu{left:35px;right:35px;top:40px;width:200px;}#menu.ul{margin:0;padding:0;list-style:none;width:200px;border-left:1px solid #0CF;border-right:1px solid #0CF;border-bottom:1px solid #0CF}#menu ul li{position:relative;border-top:1px solid #0CF;border-left:1px solid #0CF;border-right:1px solid #0CF;min-width:200px}li ul{position:absolute;right:202px;top:0;display:none}#menu ul li a{display:block;text-decoration:none;padding:4px}#menu ul li{float:left}ul li a{display:block;height:1%}#menu ul{margin:0;padding:0;list-style:none;width:200px;border-bottom:1px solid #0CF}li:hover ul,li.over ul{display:block}#gallery{margin: 0 0 1em 0;font:normal bold 100% verdana,arial,serif;background:#069;color:#000;}.gallery{list-style:none;background:#069;color:#000;margin:0;padding:0}#gallery a{text-decoration:underline;color:#000;background:#069;}form{background:#069;color:#9cf;padding:4px;width:180px}input.text{width:100px;margin-right:0px}abbr,acronym,.help{border-bottom:#ff3 1px dotted;cursor:help;color:#ff3;background:#069}#right dl{background:#9CF;color:#000}#right dl a{text-decoration:underline;color:#000;background:#9CF;border:0;padding:0}#right dd a{text-decoration:underline;color:#000;background:#9cf;border:0;margin:0 0 0 -20px}#content{min-height:3500px}* html #content{height:2000px}div.entry{float:left;padding:0;margin:0 0 2em;width:100%}#content p.pic a{color:#069;background:#069;border:0;margin:0;padding:0}div.entry .pic{float:left;clear:left;margin:5px 5px 0 0;position:relative}div.entry hr{display:block;clear:left;margin:-0.001em;visibility:hidden}div.photo{margin:0 0 3em 30px}#content a:link img{border-style:solid;border-top-color:#069;border-right-color:#069;border-bottom-color:#069;border-left-color:#069;border-width:2px}#content a:visited img{border-style:solid;border-top-color:#069;border-right-color:#069;border-bottom-color:#069;border-left-color:#069;border-width:2px}#content a:active img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#content a:hover img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#content a:focus img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}div.episode{padding:0;margin:0 0 0 40px}#content p.date{color:#ff3;background:#069;margin-bottom:1em;font-size:medium}#right div.icon a{background:#9cf;color:#000}#right div.entry{float:left;padding:0;margin:0 0 0 0;width:100%}#right div.return{float:left;background:#9cf;color:#000}#right div.return a{background:#9cf;color:#000}#right a:link img{border-style:solid;border-top-color:#9CF;border-right-color:#9CF;border-bottom-color:#9cf;border-left-color:#9cf;border-width:2px}#right a:visited img{border-style:solid;border-top-color:#9CF;border-right-color:#9CF;border-bottom-color:#9cf;border-left-color:#9CF;border-width:2px}#right a:active img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#right a:hover img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-top-width:2px}#right a:focus img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#right div.icon p.par a:link{background:#9cf;color:#000}#right div.icon p.par a:visited{background:#9cf;color:#000}#right div.icon p.par a:active{background:#069;color:#ff3}#right div.icon p.par a:hover{background:#069;color:#ff3}#right div.icon p.par a:focus{background:#069;color:#ff3}#right p.par{background:#9cf;color:#000}#right p a{background:#9cf;color:#000}#right p.img{background:#9cf;padding:0;margin:0}#right p.dvd{margin:2em 0 2em 0;background:#069;color:#fff;border:#0fc medium ridge;padding:5px;width:180px;font-size:90%;line-height:150%}#right p.privacy a{font-size:100%;text-decoration:underline;padding:0px;}a:hover,a:active,#content a:hover,#content a:active,#content a:hover,#content a:active,#content a:focus{color:#ff0;background:#069;text-decoration:none}a:hover,a:active,#right a:hover,#right a:active,#right a:hover,#right a:active,#right a:focus{color:#fff;background:#9cf;}a:hover,a:active,#right ul.links a:hover,#right ul.links a:active,#right ul.links a:hover,#right ul.links a:active,#right ul.links a:focus{color:#ff0;background:#069;}a:hover,a:active,#right ol.links a:hover,#right ol.links a:active,#right ol.links a:hover,#right ol.links a:active,#right ol.links a:focus{color:#fff;background:#069;}a:link{text-decoration:underline;color:#0FC;background:#069}a:visited{text-decoration:none;color:#CCC;background:#069}a:active{text-decoration:none;color:#FFF;background:#069}a:hover{text-decoration:none;color:#FF0;background:#069}h1{clear:both;color:#FFF;line-height:120%;letter-spacing:1px;font-size:x-large;font-style:normal;font-weight:600;border-top:#0fc medium ridge;padding:1em 0 0 15px;margin:.25em -15px 1em;background:#069}h2{color:#FF3;font-size:medium;padding:0;margin:0;border:0;background:#069}#content h2 a:hover{background:#069;color:#ff3}#content div.entry h2 a{background:#069;color:#ff3}#content div.episode h2 a{background:#069;color:#ff3}h3{color:#FF3;font-size:medium;margin-bottom:-1em;background:#069;text-decoration:none}h4{font-size:medium;padding:0;margin:0;border:0}h5{font-size:medium;padding:0;margin:0 0 -1em 15px;border:0;color:#ff3;background:#069}h6{font-size:medium;padding:0;margin:0 0 -1em 0px;border:0;color:#ff3;background:#069}strong{color:#FF3;background:#069}p{padding:0;margin:0}p.par{padding:0;margin:0 0 2em}p.par2{padding:0;margin:2em 0 2em}#content p{line-height:128%}#content p.one{margin-top:5px;margin-bottom:5px;font-size:90%}#content p.two{margin-top:5px;margin-bottom:5px;font-size:75%;color:#FF3;background:#069}#content p.three{letter-spacing:-1px;margin:2em 0;font-size:95%;color:#FFF;background:#069}#content p.three a{text-decoration:none}#content p.four{letter-spacing:-1px;margin-bottom:1em;color:#FFF;background:#069}#right p.par{padding:0;margin:0 0 2em}#right p{padding:0;margin:1em 0 1em}p.footer{padding:0;margin:2em 0 0;font:normal bold 80% verdana,arial,serif;line-height:150%}p.footer a{text-decoration:underline}a:hover,a:active,#content p.footer a:hover,#content p.footer a:active,#content p.footer a:hover,#content p.footer a:active,#content p.footer a:focus{color:#ff0;background:#069;text-decoration:none}h3.com{margin-left:15px}#content ul{list-style-type:none;margin-bottom:3em}#content ol{margin-bottom:3em}#menu a{text-decoration:none}#menu ul li{float:left;height:1%;width:100%}#menu ul li a{height:1%}li ul{right:202px}p.footer{margin:0;height:1%}#underlinemenu{margin: 0;padding: 0;}
#underlinemenu,#underlinemenu ul{margin: 0;padding:0;float: left;font-variant:small-caps;}
#underlinemenu,#underlinemenu ul,#underlinemenu ul li a{float:left;}
#underlinemenu ul{margin-bottom:1em;}#underlinemenu ul,#underlinemenu ul li a{font-weight:bold;}* html #underlinemenu ul{margin-bottom:0;}#underlinemenu ul li{display:inline;}
#underlinemenu ul li a{color:#fff;padding:6px;text-decoration:none;background:#069;border-right:2px solid #0fc;background:#069;border-bottom:2px solid #069;}
#underlinemenu ul li a:hover{color:#ff3;background:#000;border-bottom:2px solid #ff3;padding:6px}
span.link a span{display:none}span.link a:hover{font-size:100%}span.link a:hover span{display:block;position:absolute;margin-top:50px;margin-left:-150px;width:200px;padding:5px;z-index:100;background:#000;color:#ff3;border-style:solid;border-width:1px;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;text-decoration:none}#content span.link a:hover span{margin-top:30px;margin-left:0px}div.search {width:100%;border:0}img {max-width: 100%; height: auto;}ul, li{ margin: 0; padding: 0;}
.gallery {display: flex;align-items: flex-start;justify-content: flex-start;font-size: 1.5em;background-color:#069;}
.text { width: calc(100% - 150px);color: #fff;font-size: 14px; margin-left: 10px;background-color:#069;}
#content .gallery {background-color:#069;}
/*change the number below to scale to the appropriate size*/
.thumbnail:hover {transform: scale(1.40); } .thumbnail img {position:relative;}
@media screen and (max-width: 768px) {
body {display: flex; background:#9cf;url:(display:none;)}
#right {display: none;}
#header {background:#9cf;url:(display:none;);}
#holder {width: 160%; margin: 0 0 0 -65px;}
@media screen and (max-device-width : 640px) {
/* Styles */
body { background:#9cf;url:(display:none;)}
#right {display: none: padding: 1%}
#header {display: block; background:#9cf;url:(display:none;);}
#holder {}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
/* CSS */
body { -webkit-text-size-adjust: none; background:#9cf;url(display:none;)}
#right {display: none;}
#header {width: 50%;background:#9cf;url:(display:none;);}
#holder {background: #9cf; url:(display:none;)}
.title {font-size: 14px;}
