/* look for "New styles, 2014" midway through this file */ /* @override http://www.exrx.net/Calculators/text.css */ body,h1,h2,h3,h4,h5,h6,p,td,th,CAPTION { font-family:Arial, sans-serif; /* font-size:.96em; */ } .upper-exercise-responsive, .bottom-exercise, .main-display, .bottom, .TopDirectory{ width: 300px; height: 50px; } .upper-exercises, .sub-directory-responsive{ width: 320px; height: 50px; } .auxiliary-side { width: 160px !important; height: 600px!important; } /* stop wordwrap on text below logo on main pages */ .LogoHeader { white-space:nowrap; } /* selector for taking margin from header translate button */ table.Bar p{ margin:0; padding:0; } /* scale list text down */ /* li, dd, blockquote{ font-size:.93em; } */ .main{ padding:5px; } /* do not display this cell used for formatting */ .Main > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(3){ width:0; height:0; } /* correct alignment on main page pictures */ .Main p{ margin-left:0; margin-top:0; } /* add spacing between images on main pages */ /* .Main img{ margin:10px; } */ .top-banner{ width: 100%; height: 50px; margin-left:auto; margin-right:auto; display:block !important; } .header, .Bar { background-color: #c5c5e2; } body { line-height:1.3; width:96%; margin:0 auto; } table { border-collapse:collapse; border:1px solid transparent; } table[border="3"]{ border:1px solid; } /* normalize P tag font in data tables */ .WideTable p, .StackTable p, .FullTable p{ font-weight:400; } /* Add padding to a blockquote that is a child of a blockquote */ blockquote > blockquote{ margin-left: 15px; } h1,h4,h5,h6 { color:#000; background:none; font-weight:400; margin:0; padding-top:.5em; padding-bottom:.1em; } hr{ color:#aaa; } h3{ font-size: 1.1em; font-weight: 750; border-bottom:none; margin-bottom:.1em; } h2{ margin-bottom:.3em; font-size: 1.35em; font-weight:750; } h1{ margin-bottom:0; display:inline; font-size: 1.7em; font-weight:800; } h4,h5,h6 { border-bottom:none; font-weight:700; margin-bottom:.1em; } h3 { font-size:120%; } /* stop the headings above the images on the main pages from word wrapping */ .Main > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(3) > h3, .Main > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(4) > h3 { white-space:nowrap; } /* add padding on the right side of the list on home page*/ .Main > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > table:nth-child(6) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1){ padding-right:10px; white-space:nowrap; } h4 { font-size:116%; } h5 { font-size:100%; } h6 { font-size:80%; } a { cursor:pointer; } a:visited { color:#0b0080; } img { /* This centers the image */ display: block; margin-left: auto; margin-right: auto; /* MAS - no margin:5px; */ margin-top: 5px; margin-bottom: 5px; } a[href="http://www.exrx.net/index.html"] > img { margin:10px; padding:0; border:none; top:0px; padding-top:35px; float:right; display:block !important; } /* Space around Section Title */ td > h2 { margin:0 10px; } /* title text (p tag) */ td > p { font-weight:700; font-size:1em; margin-top:20px; /* padding-left: 28px; */ margin-bottom:0; margin-left:20px; } /* space between title (p tag) and text (dl tag) */ td > p + dl { margin-top:12px; } /* main text blocks (dl > dd) */ /* td > dl { width:95%; } */ /* td > dl > dd { margin-left:32px; } */ /* Adjust font sizes of table list items */ body > table > tbody > tr > td > ul { margin-left:1px; } body > table > tbody > tr > td > ul > li { /* color:navy; margin-left:4px; */ } body > table > tbody > tr > td > ul > li > a { font-size:1em; } /* Remove extraneous table in middle of pages border */ body > table[border='1'][height='20'] { border: none; display: none; } /* Adjust content table border color */ table[border='1'] > tbody > tr > td { border:1px gray solid; } /* Adjust "Classification" table layout */ body > table > tbody > tr > td table[border='1'] > tbody > tr > td { /* padding: 4px 0 3px 4px; vertical-align: middle; */ } /* large images is not collapsing - by suraj http://exrx.net/Testing/YMCAMensWorkloads.html*/ td[width="98%"] img, td[width="99%"] img { /*max-width: 100%;*/ } /*smartphones*/ /* @media only screen and (min-device-width : 320px) and (max-device-width : 481px), (min-width : 320px) and (max-width : 481px) { */ @media only screen and (max-width : 481px) { body { font-size:1.5em; }/* #translate-this { display: none; } */ .ImageStrip img{ /* display:block !important; */ } /*scales images on the site*/ img { width: 100%; height: auto; } .LogoHeader img{ width: auto; height: auto; } .SubMain>tbody>tr> td{ display:block !important; margin:0 auto; width:100%; min-width:100%; max-width:100%; border:none; } } /* adjusting adds ad different screen widths */ @media only screen and (min-width : 480px) { .ImageStrip img{ /* display:inline !important; */ } /* If images are in the table we need the table to scale so that the images can be displayed inline */ td.ImageStrip{ width:auto; } } @media only screen and (min-width : 500px){ .upper-exercise-responsive,.bottom-exercise,.main-display,.upper-exercises, .bottom, .TopDirectory { width: 468px; height: 60px; } } /*@media only screen and (min-width : 400px){ .upper-exercise-responsive,.bottom-exercise,.main-display,.upper-exercises, .bottom, .TopDirectory { width: 380px; height: 60px; } } @media only screen and (min-width : 370px){ /*.upper-exercise-responsive,.bottom-exercise,.main-display,.upper-exercises, .bottom, .TopDirectory { width: 350px; height: 60px;}*/ @media only screen and (min-width : 600px){ .FullTable{font-size: .8em;} } /* adjusting adds ad different screen widths */ /* @media only screen and (min-device-width : 720px), */ @media only screen and (min-width : 720px), (min-width: 720px) { .upper-exercises{ width: 234px; height: 60px; } } /* adjusting adds ad different screen widths */ @media only screen and (min-width : 800px) { .upper-exercise-responsive, .bottom-exercise, .bottom, .TopDirectory{ width: 728px; height: 90px; } /* 0.6em to 0.8em by suraj */ .FullTable{font-size: 1em; } } /*adjusting table fonts at different screen sizes */ @media only screen and (max-width : 599px) { .FullTable{ font-size: .4em;} /* fix word wrapping on the title */ /* tr > td > h2 > a , tr > td > h1 > a { display:inline; float:left; } */ .upper-exercises{ width:300px; height:50px; text-align:center; } } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { body { /* font-size:1.1em; */ }/* #translate-this { display: none; } */ /*scales images on the site*/ img { width: 50%; height: auto; } /* prevent image resizing for designated images */ img.NoResize { width: auto; height: auto; } } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1025px) { /* Keep site layout from exploding too wide */ body { width:1024px; margin:0 auto; } .main-display { width: 728px; height: 90px; } } /* -------- REMOVE EXTRA ELEMENTS ----- */ @media only print { ins,#translate-this,body > center { display:none; } /* Remove link styling for printing */ a,body > table > tbody > tr > td > ul > li { color:#000; } /* Keep color styling on exercise title text */ h1 > a { color:navy!important; } h2, h3{ font-size:100% !important; } } /* @media only screen and (max-width: 600px), (min-device-width: 320px) and (max-device-width: 1024px) { */ @media only screen and (max-width: 600px) { /* li, dd, blockquote{ font-size:.95em; } */ /* extends large tables to 100% width */ table[width="90%"],table[width="95%"]{ width:100%; max-width:100%; min-width:100%; height:auto; } /* take out image margins when main pages go responsive */ .Main img{ margin:0; } /* stacktable properties */ /* .StackTable, .StackTable > tbody > tr > td { display:block !important; margin:0 auto; width:100%; height:auto; min-width:100%; max-width:100%; border:none; padding:5px; } */ .Main td { padding:5px; } .header[align="CENTER"], .header[align="RIGHT"] { text-align: left; } /* makes the logo and the ad display block */ .LogoHeader > tbody > tr > td{ display:block; min-width:100%; max-width:100%; width:100%; } /* aligns right justified pieces to the center */ body > table:not(.Main)> tbody > tr > td[align="RIGHT"][width="1%"]{ width:100%; min-width:100%; max-width:100%; text-align: center; } /* Class used to not display elements on a page */ .xelement{ display:none; } .auxiliary-side { width: 300px !important; height: 250px !important; } /* Adjust body text size */ body { font-size:1em; line-height:1.4; } .header { padding:5px; position:relative; } /* imagestrip images will not scall with window size like other images */ .ImageStrip img { width: auto; height: auto; } img[src *= "YourAdHere/Physigraphe.gif"], img[src *= "YourAdHere/TrainerClipArt.gif"] { width: 100%; width: 98%; height: auto; } img[src *= "AnimatedEx"]{ margin:0; } /* keeps the exrx.net image from scaling */ td > h2 > a > img{ width:auto; height:auto; } td{ padding:0; } /*pops the excersize label under site logo*/ td[width='1%'], td[width='99%'], td[width='90%'], td[width='98%'],[width='2%']{ display:block; } /* MAS */ td[width='1%'], td[width='99%'], td[width='90%'], td[width='98%'], td[width='2%']{ width: auto; } td[width='1%'], [width='2%']{ width:100%; min-width:100%; max-width:100%; text-align:center; } td[width='1%'] img, [width='2%']img{ width:auto; height:auto; } h2 { margin-left: 0 !important; } /* title text (p tag) */ td > p { margin-left:18px; } /*adjust margins for nested lists*/ ul > li { padding:0; margin-left:10px !important; } /*adjust margins for nested lists*/ /* li > ul { padding:0; margin-left:5px !important; } td > ul { padding:0; margin-left:15px !important; } */ td > dl > dd { margin-left:24px; } .Bar , .Bar td{ background-color: #c5c5e2; display:block; margin:0 auto; width:100%; min-width:100%; max-width:100%; } /*fixes the placement of links below site title*/ /*drop translate button down when the window is scaled*/ /* body > center:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) >p:nth-child(2), td[width="85%"], td[width="15%"]{ float:left; } */ /* adjust the size on printable tables */ .FullTable{ width:100%; height:auto; } .FullTable img{ display:inline-table; width:auto; min-width:auto; max-width:auto; } /* .StackTable p{ padding:5px; } */ /* add responsiveness to the pages linked from articulations */ table[width="100%"] .AltCells td { display:block; border:none; width:100%; height:auto; } /* fixed margins on dl tags linked from articulations */ /* adjust margins on P tags */ /*adjust margins for blockquotes*/ table[width="100%"] .AltCells td > dl > dd , td > p, blockquote{ margin:0; padding:0; } /* Remove content table border color */ body > table[border='1'] > tbody > tr > td { border:none; } /* Prevent overflow-x from ad at bottom */ body > center,body > center > ins { overflow-x:inherit; } } /* New styles, 2014 */ /* ================ */ /* Most above styles have been kept; some of these actively neutralize those while it may be possible to undo the above styles and use less CSS. We will have to see the breadth of consequences of removing or modfying the above styles. In the meantime, hopefully these styles are directed specifically enough that their consequences are well known. It may ultimately be fine to leave this combination of styles. */ /* ------------------------------------------------------------------- */ /* firmly assert sizes of heading tags and give them styles that help visually distinguish the information hierarchy */ h1 { /* font-size: 200% !important;*/ font-weight: bold !important; } h2 { /* font-size: 150% !important;*/ font-weight: bold !important; } h3 { /*font-size: 120% !important;*/ font-weight: bold !important; } h4 { border-bottom: 1px solid #DDDDDD; /*font-size: 110% !important;*/ font-weight: bold !important; color: #333333 !important; } h5 { font-size: 100% !important; font-weight: bold !important; color: #555555 !important; } h6 { /*font-size: 80% !important;*/ font-weight: bold !important; color: #999999 !important; } /* reduce margins for headings at the top of table cells (presumably layout tables) */ td > h1:first-child, td > h2:first-child, td > h3:first-child { margin-top: 0px; } /* make font size larger for default/desktop view */ body { font-size: 16px; } /* prevent regular text becoming bold; target specifically the text which is usually a minor heading of an exercise page, which was probably the original intention */ td > p { font-weight: normal; } /* edited by suraj */ td[width="50%"] > p { font-weight: normal; } /* prevention of telescoping/tapering of edges on breadcrumb bar; caused by transparent 1px borders and nested tables */ table.Bar, table.Bar table { border: 0px; } table.Bar td { } /* vertical adjustment of running-man logo so it appears centered */ .LogoHeader img[width="38"] { position: relative; top: 16px; } /* set list left padding to appear same as blockquote; reduce for nested lists; set list item left padding to be about one letter's (apparent) space */ /* ul { padding-left: 57px; } ul li { padding-left: 0.4ex; } ul ul , ol ul { padding-left: 1.8ex; } ol { padding-left: 62px; } ol li { padding-left: 0.4ex; } ul ol { padding-left: 1.8ex; } ol ol { padding-left: 3.5ex; } */ ul > ul , ol > ol { padding-left: 0px; } /* dl { } dl dd, dl dt { margin-left: 0; padding-left: 43px; } */ /* give a little vertical space to distinguish nested lists */ /* ul ol, ul ul, ol ol, ol ul { margin-top: 0.2em; margin-bottom: 0.4em; } */ /* minimize margin/pad around lists which are first children of table cells; initially targeted as only-child, then realized sometimes they are first children with ads following */ td > ul:first-child, td > ol:first-child { margin: 0.5em 0; padding: 0 0.5em 0 24px; } td > dl:first-child { margin: 0.5em 0; } /* neutralize padding for blue tables with lists in them used as menus */ td[bgcolor="#d8cff1"] > ul:first-child, td[bgcolor="#d8cff1"] > ol:first-child { padding-right: 0; padding-left: 24px; } td[bgcolor="#d8cff1"] dl dt { padding-left: 0; } /* on pages with lists inside blockquotes, particularly next to paragraphs (this rule specifically targets any list coming after a paragraph when both are inside a blockquote), decrease indentation; example: center-of-gravity page */ blockquote p ~ ul { padding-left: 20px; } blockquote p ~ ol { padding-left: 24px; } /* on pages with only headers and lists, decrease indentation; example: Exercises main page */ /* h3 + ul, h3 + ol { padding-left: 32px; } */ /* apparent inconsistent line thicknesses in tables; th tags inside of tbody for some reason */ tbody > tr > th { border: 1px solid black; } /* prevent unintended margins for td > p > center on the p tag which is often mangled by the WYSIWYG */ td > p:first-child, th > p:first-child { margin-top: 0px; margin-bottom: 0px; } /* prevent image resizing for designated images */ img.NoResize { width: auto; height: auto; } .NoResizeImages img, .ImageTable img { width: auto; height: auto; } /* prevent back-and-forth navigation arrows from resizing or being positioned awkwardly */ img[src*="PCKits/create"] { display: inline-block; max-width: 100%; height: auto; } img[src*="PCKits/forward_button.gif"], img[src*="PCKits/back_button.gif"] { display: inline-block; width: auto; } .ImageStrip img { display: inline; } /* add margins to floated images */ img[align="LEFT"] { margin-right: 5px; } img[align="RIGHT"] { margin-left: 5px; } /* give table borders a 3D look if they are used as data tables */ table[border="1"] { border: 1px outset gray; border-spacing: 0px; border-collapse: separate; } table[border="1"] td { border: 1px inset gray; } /* ignore HTML imposition of height */ .LogoHeader[height] { height: auto; } /* make header (logo + ad) height consistent across top-level pages */ .LogoHeader > tbody > tr > td:last-child:not(:nth-child(3)) { min-height: 100px; } /* home page, index list/table should be full width */ table.Main > tbody > tr > td:nth-child(1) table[width="190"] { min-width: 190px; width: 100%; } /* align images within headings, such as on Lists/Directory.html */ .ImageHeading img { display: inline-block; vertical-align: middle; } .ImageHeading + * { clear: both; } /* temp previews for Meat Exchanges page */ .MeatExchanges .WideTable td { padding-left: 1px; padding-right: 1px; } .MeatExchanges .WideTable td:nth-child(3), .MeatExchanges .WideTable td:nth-child(4) { white-space: nowrap; text-align: center; } /* responsive iframes, such as for embedded videos */ .ResponsiveIframeWrapper, .ResponsiveObjectWrapper, .video { float: none; clear: both; position: relative; padding-bottom: 56.25%; padding-top: 25px; width: 100%; height: 0px; } .ResponsiveIframeWrapper iframe, .ResponsiveIframeWrapper object, .ResponsiveObjectWrapper object, .ResponsiveObjectWrapper iframe, .video iframe, .video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } /* make it so children of table cells, like images, with width=100% don't spill over the padding */ table:not(.Main):not(.FullTable) td { box-sizing: padding-box; -moz-box-sizing: padding-box; -webkit-box-sizing: padding-box; } /* make WideTables scroll if needed; avoid styling mistsakenly attributed tables, style only the containers */ .WideTable:not(table) { overflow-x: auto; } /* home & main pages, ensure headings don't break across lines */ .HomePageImageTable h3, .SubMain h3 { white-space: nowrap; } /* home page: proper heading and image placement of image grid */ .HomePageImageTable td { padding-top: 0px; padding-bottom: 0px; } .HomePageImageTable img { margin: 0px 5px; } /* compensate for height difference of images without a border */ .HomePageImageTable img:not([border="1"]) { border: 1px solid transparent; } /* help to prevent bizarre image bloating on erroneous devices & browsers; */ img[src*="Runner.gif"] { width: 38px; height: 48px; } img[src*="RunningManBanner47H.gif"] { width: 200px; height: 47px; } img[src*="viewcartcheckout.gif"], img[src*="Images/Site/putincart.gif"], img[src*="putincartDVD.gif"] { width: auto !important; height: auto !important; } /* prevent stretching of layout tables by ads, such as on tablets, in important tables which should not be stretched horizontally */ td[width="50%"] { box-sizing: padding-box; -moz-box-sizing: padding-box; -webkit-box-sizing: padding-box; } td[width="50%"] ins { display: block !important; width: 100%; max-width: 100%; } /* DEVICES: ANDROID, iOS, mobile */ /* ----------------------------- */ /* .mobile img[width] { width: auto; height: auto; } */ /* RESPONSIVE: (< 1024px) */ /* ---------------------- */ @media only screen and (max-width: 1023px) { /* converts home page to two-column view, except on iPad for this resolution */ body.HomePage:not(.iPad) > p > table, body.HomePage:not(.iPad) > p > table > tbody, body.HomePage:not(.iPad) > p > table > tbody > tr, body.HomePage:not(.iPad) > p > table > tbody > tr > td, body:not(.iPad) .Main, body:not(.iPad) .Main > tbody, body:not(.iPad) .Main > tbody > tr, body:not(.iPad) .Main > tbody > tr > td { display: block; margin: 0 auto; padding-left: 0px; padding-right: 0px; width: 100%; height: auto; min-width: 100%; max-width: 100%; border: none; } } /* RESPONSIVE: >= 731px and <= 954px */ /* -------------------------------------------- */ /* ORLY schism this off and do only .mobile for that lower range? */ /* (precarious range for homepage + main pages with full-size, external banner) */ @media only screen and (min-width : 601px) and (max-width : 954px) { /* prevent top banner ad from breaking layout tables, possibly due to incorrect or brazen math in calculating which ad sizes should fit */ html:not(.mobile) table.LogoHeader, html:not(.mobile) table.LogoHeader > tbody, html:not(.mobile) table.LogoHeader > tbody > tr, html:not(.mobile) table.LogoHeader > tbody > tr > td { display: block; } html:not(.mobile) table.LogoHeader > tbody > tr > td:nth-child(1) { width: auto; text-align: left; } html:not(.mobile) table.LogoHeader > tbody > tr > td:nth-child(2), html:not(.mobile) table.LogoHeader > tbody > tr > td:nth-child(3) { width: auto; text-align: center; } html:not(.mobile) table.LogoHeader > tbody > tr > td:nth-child(2) > ins, html:not(.mobile) table.LogoHeader > tbody > tr > td:nth-child(2) > img, html:not(.mobile) table.LogoHeader > tbody > tr > td:nth-child(3) > ins, html:not(.mobile) table.LogoHeader > tbody > tr > td:nth-child(3) > img { display: block; margin-left: auto; margin-right: auto; } } /* (homepage + main pages; adjusted for seemingly-erroneous tablets) */ @media only screen and (min-width : 601px) and (max-width : 954px) and (orientation: portrait) { /* prevent top banner ad from breaking layout tables, possibly due to incorrect or brazen math in calculating which ad sizes should fit */ .mobile table.LogoHeader, .mobile table.LogoHeader > tbody, .mobile table.LogoHeader > tbody > tr, .mobile table.LogoHeader > tbody > tr > td { display: block; } .mobile table.LogoHeader > tbody > tr > td:nth-child(1) { text-align: left; } .mobile table.LogoHeader > tbody > tr > td:nth-child(2) { text-align: center; } } /* RESPONSIVE: <= 768px */ /* -------------------- */ /* (tablet portrait) */ @media only screen and (max-width : 768px) { /* remove height-consistency enforcement on header of main pages because header layout is diff now */ .LogoHeader > tbody > tr > td:last-child { min-height: 0px; } /* make StackTables work */ .StackTable.FromTablet { display: block; margin: 0px auto; width: 95%; height: auto; min-width: 0px; max-width: auto; /* border: none; */ } .StackTable.FromTablet > tbody { display: block; } .StackTable.FromTablet > tbody > tr { display: block; } .StackTable.FromTablet > tbody > tr > td { display: block; margin: 0px auto; padding: 5px 0px; width: 100%; height: auto; min-width: 0px; max-width: auto; /* border: none; */ } .StackTable.FromTablet img { float: none; margin: 0px; } .StackTable.FromTablet caption { display: block; } /* experimental! suraj*/ img[width] { width: auto; height: auto; } .StackTable img, .StackTable img[width] , .SubMain img, .SubMain img[width] { width: 100%; height: auto; } .StackTable table img, .StackTable table img[width] , .SubMain table img, .SubMain table img[width] { /*width: auto; height: auto; *//* suraj */ } img[src*="Store/"] { width: 100%; } img[src*="Images/Testing/WattsKpTree2.gif"], img[src*="OtherImages/TwinStimIIIwcontents600.jpg"] { width: 100% !important; } } /* RESPONSIVE: <= 768px and orientation: portrait */ /* ---------------------------------------------- suraj */ @media only screen and (max-width: 768px) and (orientation: portrait) { td[width="50%"] img[src*="AnimatedEx"] { width: 100% !important; height:auto; } } /* RESPONSIVE: <= 768px and orientation: landscape */ /* ----------------------------------------------- */ @media only screen and (max-width: 768px) and (orientation: landscape) { td[width="50%"] img[src*="AnimatedEx"] { width: auto !important; } } /* RESPONSIVE: >= 768px and <= 1023px and orientation: landscape */ /* ------------------------------------------------------------- */ /* (only landscape tablet or similar desktop size & orientation) */ @media only screen and (min-width : 768px) and (max-width : 1023px) and (orientation: landscape) { /* bound the width of WideTable containers so that the tables don't stretch out the layout, which can happen if WideTable is within a layout table */ .WideTable:not(table) { max-width: 940px !important; } /* adjust if within column displaced by ads */ td[width="98%"] .WideTable:not(table), td[width="99%"] .WideTable:not(table) { max-width: 740px; } /* adjust if within narrow column */ td[width="50%"] .WideTable:not(table) { max-width: 560px; } } /* RESPONSIVE: >= 601px and <= 768px */ /* --------------------------------- */ /* (portrait tablet) */ @media only screen and (min-width : 601px) and (max-width : 768px) { /* shave off some margins from blockquote (default 40px) */ blockquote { margin-right: 15x; } /* stretch exercise images that appear on exercise pages */ #tenreps + img[src*="AnimatedEx"] { width: 100%; height: auto; } /* make StackTables work */ .StackTable.OnlyTablet { display: block; margin: 0px auto; width: 95%; height: auto; min-width: 0px; max-width: auto; /* border: none; */ } .StackTable.OnlyTablet > tbody { display: block; } .StackTable.OnlyTablet > tbody > tr { display: block; } .StackTable.OnlyTablet > tbody > tr > td { display: block; margin: 0px auto; padding: 5px 0px; width: 100%; height: auto; min-width: 0px; max-width: auto; /* border: none; */ } .StackTable.OnlyTablet img { float: none; margin: 0px; } .StackTable.OnlyTablet caption { display: block; } } /* RESPONSIVE: >= 651px and <= 768px */ /* --------------------------------- */ /* (wider possibility of portrait tablet) */ @media only screen and (min-width : 651px) and (max-width : 768px) { /* bound the width of WideTable containers so that the tables don't stretch out the layout, which can happen if WideTable is within a layout table */ .WideTable:not(table) { max-width: 680px !important; } /* adjust if within column displaced by ads */ td[width="98%"] .WideTable:not(table), td[width="99%"] .WideTable:not(table) { max-width: 480px !important; } /* adjust if within narrow column */ td[width="50%"] .WideTable:not(table) { max-width: 300px !important; } } /* RESPONSIVE: >= 601px and <= 650px */ /* --------------------------------- */ /* (narrower possibility of portrait tablet) */ @media only screen and (min-width : 601px) and (max-width : 650px) { /* for data tables - deduced to be tables with discrete widths, not percentage widths - limit their text size, because some of them are incompressible in this resolution and break the tables; also limit width */ table[width$="0"], table[width$="1"], table[width$="2"], table[width$="3"], table[width$="4"], table[width$="5"], table[width$="6"], table[width$="7"], table[width$="8"], table[width$="9"] { font-size: 90%; max-width: 230px; } td[width="98%"] img, td[width="99%"] img { max-width: 355px; } /* bound the width of WideTable containers so that the tables don't stretch out the layout, which can happen if WideTable is within a layout table */ .WideTable:not(table) { max-width: 555px !important; } /* adjust if within column displaced by ads */ td[width="98%"] .WideTable:not(table), td[width="99%"] .WideTable:not(table) { max-width: 355px !important; } /* adjust if within narrow column */ td[width="50%"] .WideTable:not(table) { max-width: 180px !important; } } /* RESPONSIVE: <= 600px */ /* -------------------- */ @media only screen and (max-width : 600px) { /* CSS by SUraj - To make some widetables work and make contant responsive in mobile devices */ table[width="100%"][border="0"][cellspacing="0"][cellpadding="0"] > tbody > tr, table[width="100%"][border="0"][cellspacing="0"][cellpadding="0"] > tbody , table[width="100%"][border="0"][cellspacing="0"][cellpadding="0"] {display:block; text-align: initial;} /* table[width="100%"][border="0"][cellspacing="0"][cellpadding="0"] > tbody > tr, table[width="100%"][border="0"][cellspacing="0"][cellpadding="0"] > tbody , table[width="100%"][border="0"][cellspacing="0"][cellpadding="0"] {display:block;} */ /*CSS by suraj ends*/ /* collapses columns of main layout table */ body:not(.HomePage) > table[border="1"], body:not(.HomePage) > table[border="1"] > tbody, body:not(.HomePage) > table[border="1"] > tbody > tr, body:not(.HomePage) > table[border="1"] > tbody > tr > td, body:not(.HomePage) > table[width="100%"] > tbody > tr > td[width="50%"] { display: block; margin: 0 auto; padding-left: 0px; padding-right: 0px; width: 100%; height: auto; min-width: 100%; max-width: 100%; border: none; } /* standardizes text alignment behaivor of page title and the text below it */ body > center:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) > h2:nth-child(1) a, body > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) > h2:nth-child(1) a { display: block; float: none; clear: both; text-align: center; } body > center:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) > p:nth-child(2), body > center:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) > h3:nth-child(2), body > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) > p:nth-child(2), body > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) > h3:nth-child(2) { display: block; float: none; clear: both; margin-top: 0px; padding-top: 0.3em; text-align: center; } /* in store pages, move the cart button to the top-right corner */ body > center:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) > h2 > a > img[src*="viewcartcheckout.gif"], body > center:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) > h2 > a > img[src*="viewcartcheckout.gif"] { position: absolute; top: 17px; right: 7px; } /* home page, index list/table should be centered */ .HomePage table.Main > tbody > tr > td:nth-child(1) table[width="190"] { margin-left: auto; margin-right: auto; } /* allow Translate This to flow next to the breadcrumb menu */ table.Bar { display: block !important; text-align:initial; } table.Bar > tbody { display: block !important; } table.Bar > tbody > tr { display: block !important; } table.Bar > tbody > tr > td { display: inline-block !important; float: none; width: auto; min-width: 0px; max-width: none; } /* give horizontal space before Translate This */ table.Bar > tbody > tr { word-spacing: 32px; } table.Bar > tbody > tr > td { word-spacing: normal; } /* give more tighly-grouped font sizes for headings on mobile */ h1 { font-size: 140% !important; } h2 { font-size: 125% !important; } h3 { font-size: 112% !important; } h4 { font-size: 105% !important; } h5 { font-size: 100% !important; } h6 { font-size: 94% !important; } /* compress left padding in lists */ ul { padding-left: 8px; } ul li { padding-left: 0.25ex; } ul ul , ol ul { padding-left: 0.6ex; } ol { padding-left: 26px; } ol li { padding-left: 0.25ex; } ul ol , ol ol { padding-left: 2.5ex; } dl { } dl dd, dl dt { margin-left: 0; } /* prevent image resizing for designated images */ img.NoResize { width: auto; height: auto; } /* neutralize padding for blue tables with lists in them used as menus */ td[bgcolor="#d8cff1"] > ul:first-child, td[bgcolor="#d8cff1"] > ol:first-child { padding-right: 0; padding-left: 8px; } /* make StackTables work */ .StackTable:not(.OnlyMobile) { display: block; margin: 0px auto; width: 95%; height: auto; min-width: 0px; max-width: auto; /* border: none; */ } .StackTable:not(.OnlyMobile) > tbody { display: block; } .StackTable:not(.OnlyMobile) > tbody > tr { display: block; } .StackTable:not(.OnlyMobile) > tbody > tr > td { display: block; margin: 0px auto; padding: 5px 0px; width: 100%; height: auto; min-width: 0px; max-width: auto; /* border: none; */ } .StackTable:not(.OnlyMobile) img { float: none; margin: 0px; } .StackTable:not(.OnlyMobile) caption { display: table-caption; } /* AltCells/AltTable, remove borders; table100 selector from before */ .AltCells , .AltCells[border="1"] { border: 0px; } } /* RESPONSIVE: >= 481px and <= 599px */ /* --------------------------------- */ /* (smartphones: landscape, not portrait) */ @media only screen and (min-width : 481px) and (max-width : 599px) { /* bound the width of WideTable containers so that the tables don't stretch out the layout, which can happen if WideTable is within a layout table */ .WideTable:not(table) { max-width: 520px !important; } } /* RESPONSIVE: <= 480px */ /* -------------------- */ /* (landscape smartphones) */ @media only screen and (max-width : 480px) { /* make font size larger for mobile */ body { font-size: 18px; } /* make header (logo + ad) height consistent across top-level pages */ .LogoHeader > tbody > tr > td:last-child:not(:nth-child(3)) { min-height: 60px; } /* home page, index list/table should be full width on smallest resolutions; larger font size for good measure, to use some of this new horizontal space */ .HomePage table.Main > tbody > tr > td:nth-child(1) table[width="190"] { font-size: 18px; line-height: 1.4em; } /* home page, remove horizontal padding that effectively removes right gutter */ .HomePage table.Main td { padding-left: 0px; padding-right: 0px; } /* home page, full-width forms and form elements */ .HomePage table.Main > tbody > tr > td:nth-child(1) > table > tbody > tr > td > center:nth-child(3) form { text-align: left; } table.Main > tbody > tr > td:nth-child(1) > table > tbody > tr > td > center:nth-child(3) form select { width: 100%; font-size: 125%; } table.Main > tbody > tr > td:nth-child(1) > table > tbody > tr > td > center:nth-child(13) form { position: relative; width: 100%; } table.Main > tbody > tr > td:nth-child(1) > table > tbody > tr > td > center:nth-child(13) form font { font-size: 16px !important; } table.Main > tbody > tr > td:nth-child(1) > table > tbody > tr > td > center:nth-child(13) form input[type=text] { width: 88%; font-size: 18px; } table.Main > tbody > tr > td:nth-child(1) > table > tbody > tr > td > center:nth-child(13) form input[type=submit] { width: 43% !important; font-size: 16px; } /* decrease vertical space between stacked table cells */ td[width="50%"] { padding-top: 0px; padding-bottom: 0px; } /* restore margins for headings at the top of stacked table cells */ td[width="50%"] + td > h1:first-child, td[width="50%"] + td > h2:first-child, td[width="50%"] + td > h3:first-child { margin-top: 20px; } /* increase width and size of navigation drop-down menu at bottom */ center:last-child select[onchange^=selectaplace] { margin-bottom: 12px; width: 100%; font-size: 18px; } /* forms at bottom of store page: increase width/size of subscription form */ form[action^=MailingList] > font:first-child { display: block; width: 95%; } form[action^=MailingList] > font:first-child > font { display: block; } form[action^=MailingList] > font:first-child input[type=text] { width: 93%; font-size: 18px; } form[action^=MailingList] > font:first-child input[type=submit] { position: relative; width: 48% !important; font-size: 16px; } /* forms at bottom of store page: increase width of box */ form[action^=MailingList] table[width="210"] { width: 100%; } form[action^=MailingList] table[width="210"] img { width: auto; } /* vertical adjustment of running-man logo so it appears centered */ .LogoHeader img[width="38"] { top: 22px; } /* prevent images from floating */ img[align="LEFT"], img[align="RIGHT"] { float: none; margin-left: 0px; margin-right: 0px; } /* prevent add-to-cart buttons from floating, looking bloated */ img[src *= "Images/Site/viewcartcheckout.gif"], img[src *= "Images/Site/putincart.gif"], img[src *= "putincartDVD.gif"] { display: block; margin-left: auto; margin-right: auto; float: none; width: auto !important; height: auto !important; } /* bound the width of WideTable containers so that the tables don't stretch out the layout, which can happen if WideTable is within a layout table */ /* fix vertical butting-up-against of tables */ .WideTable:not(table) { margin-bottom: 18px; padding-bottom: 20px; } /* compress left padding in lists */ ul { padding-left: 9px; } ul li { padding-left: 0.25ex; } ul ul , ol ul { padding-left: 0.6ex; } ol { padding-left: 26px; } ol li { padding-left: 0.25ex; } ul ol , ol ol { padding-left: 2.5ex; } dl { } dl dd, dl dt { margin-left: 0; padding-left: 4px; } /* minimize margin/pad around lists which are first children of table cells; initially targeted as only-child, then realized sometimes they are first children with ads following */ td > ul:first-child, td > ol:first-child { padding-left: 2px; padding-left: 10px; /* bullet point clashed with table border @ 2px */ } /* on pages with lists inside blockquotes, particularly next to paragraphs (this rule specifically targets any list coming after a paragraph when both are inside a blockquote), decrease indentation; example: center-of-gravity page */ blockquote p ~ ul { padding-left: 32px; padding-left: 8px; } blockquote p ~ ol { padding-left: 10px; padding-left: 30px; } /* AltCells / AltTable - apparently make them appear just like StackTables.. */ .AltCells { display: block; } .AltCells > tbody { display: block; } .AltCells > tbody > tr { display: block; } .AltCells > tbody > tr > td { display: block; width: auto; } .AltCells img{ width: 100%; height: auto; } /* AltCells / AltTable, remove image margins for portrait<=>bio tables, like Models */ .AltCells td { margin-left: 0px; margin-right: 0px; box-sizing: padding-box; -moz-box-sizing: padding-box; -webkit-box-sizing: padding-box; } .AltCells td:nth-child(2) { padding-left: 5px; padding-right: 5px; } /* make StackTables work */ .StackTable { display: block; margin: 0px auto; width: 95%; height: auto; min-width: 0px; max-width: auto; /* border: none; */ } .StackTable > tbody { display: block; } .StackTable > tbody > tr { display: block; } .StackTable > tbody > tr > td { display: block; margin: 0px auto; padding: 5px 0px; width: 100%; height: auto; min-width: 0px; max-width: auto; /* border: none; */ } .StackTable img { float: none; margin: 0px; } .StackTable caption { display: block; } /* prevent image resizing for designated images */ img.NoResize { width: auto; height: auto; } /* prevent 3D look of table borders */ table[border="1"] { border: 1px solid black; border-spacing: 0px; border-collapse: collapse; } table[border="1"] td { border: 1px solid black; } /* neutralize padding for blue tables with lists in them used as menus */ td[bgcolor="#d8cff1"] > ul:first-child, td[bgcolor="#d8cff1"] > ol:first-child { padding-right: 0; padding-left: 24px; } /* prevent interleaving of text lines with PC Kits image */ img[src*="PCKits/HomeMain"] { float: none; } /* ads in right column should be centered horizontally */ .auxiliary-side { margin-left: auto; margin-right: auto; } /* text ads at bottom in mobile view sometimes(?) were too short */ ins.bottom { height: auto !important; min-height: 60px !important; } /* prevent images on physigraphe page from butting up agaisnt text */ img[src*="PhysigrapheImages/i_logo_products"] { width: 96%; } /* TenReps button on exercise pages */ #tenreps { float: none !important; margin-bottom: 20px; } #tenreps > a { } #tenreps #add_favourite, #tenreps #remove_favourite { display: inline-block; width: 40%; } #tenreps #add_favourite.hide, #tenreps #remove_favourite.hide { display: none; } #tenreps + img { clear: both; } /* e.g. exercise page */ td > dl > dd { margin-left: 0px; } /* by suraj */ img[src*="Images/YourAdHere/BodyTrackerPro.gif"],img[src*="OtherImages/TwinStimIIIwcontents600.jpg"] { width: 100% !important; } } @media only screen and (min-width: 321px) and (max-width : 480px) { .WideTable:not(table) { max-width: 432px !important; } } /* RESPONSIVE: >= 481px width and <= 480px height */ /* ---------------------------------------------- */ /* (landscape smartphones) */ @media only screen and (min-width : 481px) and (max-height : 480px) { img { width: auto; height: auto; } } /* RESPONSIVE: 360px width */ /* ----------------------- */ /* (oddball smartphones) */ @media only screen and (width : 360px) { .WideTable:not(table) { max-width: 310px !important; } img[src*="YourAdHere"] { max-width: 310px; } } /* RESPONSIVE: <= 320px width */ /* (narrow smartphones) */ @media only screen and (max-width : 320px) { .WideTable:not(table) { max-width: 300px !important; } img { max-width: 305px !important; } img[src*="YourAdHere"] { max-width: 300px; } } /* RESPONSIVE: <= 240px width */ /* (very narrow smartphones) */ @media only screen and (max-width : 240px) { .WideTable:not(table) { max-width: 180px !important; } img[src*="YourAdHere"] { max-width: 180px; } } /* PRINT */ /* ----- */ @media print { /* reinstate center tags' visibility in general */ body > center { display: block; } /* show site banner */ body > p:first-child, body > p:first-child + center { display: block; } /* remove bottom strip */ body > center:last-child { display: none; } table.FullTable { font-weight:normal; } } /* by Suraj For Exercise Vimieo Videos */ .ExVideo { padding-bottom: 75%; padding-top: 0px; width: 100%; max-width: 100%; height: 0; position: relative; overflow: hidden; margin-bottom: 20px; } .ExVideo iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } /*table[width="100%"] td[width="50%"] iframe{ float: none; clear: both; position: relative; padding-bottom: 0; padding-top: 0px; width: 100%; top: 0px; left: 0px; } @media only screen and (min-width : 992px) { table[width="100%"] td[width="50%"] iframe{ height:368px; } } @media only screen and (min-width : 768px) and (max-width : 992px) { table[width="100%"] td[width="50%"] iframe{ height:335px; } } @media only screen and (min-width : 480px) and (max-width : 600px) { table[width="100%"] td[width="50%"] iframe{ height:413px; } } @media only screen and (min-width : 320px) and (max-width : 480px) { table[width="100%"] td[width="50%"] iframe{ height:326px; } } @media only screen and (min-width : 250px) and (max-width : 320px) { table[width="100%"] td[width="50%"] iframe{ height:215px; } } @media only screen and (min-width : 601px) and (max-width : 768px) { table[width="100%"] td[width="50%"] iframe{ height:254px; } } */