table { border: 20px solid #005daa; font-weight:900; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius: 15px; border-spacing:0; margin: 0 auto; border-collapse: inherit; } table a { color: #000; } table thead tr th:only-child { text-align:center; background-color:#005daa; font-size: x-large; color:#fff; padding:5px 13px 20px; } thead tr th:nth-child(1) { text-align:left; background-color:#dce9e3; color:#000; padding:13px; } thead tr th:nth-child(2) { text-align:center; background-color:#dce9e3; color:#000; padding:13px; } thead tr th:nth-child(3) { text-align:left; background-color:#dce9e3; color:#000; padding:13px; } td { padding: 13px; text-align: left; } table tr:nth-child(1) { background-color:#fae1c7; } table tr:nth-child(2) { background-color:#d2cbe5; } table tr:nth-child(3) { background-color:#eed2c7; } table tr:nth-child(4) { background-color:#c7cfe9; } table tr:nth-child(5) { background-color:#d3e7d0; } table th { background-color: #005daa; color: white; } /* This query will take effect for any screen smaller than 760px and also iPads specifically. */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } td { /* Behave like a "row" */ border: none; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data */ td:nth-of-type(1):before { content: "Use of ...";} td:nth-of-type(2):before { content: "Was linked to";} td:nth-of-type(3):before { content: "Having a baby born with"} } /* Resposive Arrow - Comination line and point */ .rightarrow { width: 120px; } .point { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 20px solid blue; margin-top: -5px; margin-right: -9px; float:right; } /* Point Colors */ #orangepoint { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 20px solid #ec891d; margin-top: -5px; margin-right: -9px; float:right; } #purplepoint { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 20px solid #5a4099; margin-top: -5px; margin-right: -9px; float:right; } #rustpoint { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 20px solid #b35341; margin-top: -5px; margin-right: -9px; float:right; } .orange { background: #ec891d; } .purple { color: #5a4099; background: #5a4099; } .rust { color: #b35341; background: #b35341; } /* Line Colors */ #line { border: 0; margin-top:14px; width: 100%; height: 7px; text-align: center; } .orange { background: #ec891d; } .purple { color: #5a4099; background: #5a4099; } .rust { color: #b35341; background: #b35341; } .blue { color: #005daa; background: #005daa; } .green { color: #0ca847; background: #0ca847; } @media only screen and (max-width: 768px) { #arrow { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; content: ""; display: block; background-color: transparent; } .orange-arrow { border-top: 20px solid #ec891d !important; } .purple-arrow { border-top: 20px solid #5a4099 !important; } .rust-arrow { border-top: 20px solid #b35341 !important; } .blue-arrow { border-top: 20px solid #005daa !important; } .green-arrow { border-top: 20px solid #0ca847 !important; } } @media only screen and (max-width: 768px) { div[id=arrow] { display: block; width: 0 !important; height: 0 !important; border-left: 50px solid transparent !important; border-right: 50px solid transparent !important; content: "" !important; background-color: transparent !important; } div[class=arrow] { border-top: 20px solid #ec891d !important; } div[id=line] {display: none !important;} }