Collection of custom CSS

[jessica]

I thought I would throw mine in, I starting with the whole markdown, but there was so much I could do with HTML, and I thought I would go with it.

Here is the userstyle.css

/* For styling the rendered Markdown */
* {
	margin: 0;
	padding: 0;
}

body {
    font-size: 62.5%;
    background-color: #222222;
}

p, li {
	font: 1.2em/1.8em Tahoma, sans-serif;
	margin-bottom: 10px;
}

h1 {
	font: 2.0em Tahoma, sans-serif;
	color: #FFFFFF;
	height: 0px;
}

h2 {
	font: 1.8em Tahoma, sans-serif;
	color: #FFFFFF;
	margin-bottom: 0px;
}

h3 {
	font: 1.5em Tahoma, sans-serif;
	color: #FFFFFF;
	margin-bottom: 0px;
}

h4 {
	font: 1.2em Tahoma, sans-serif;
	color: #FFFFFF;
	margin-bottom: 0px;
}

h5 {
	font: 0.9em Tahoma, sans-serif;
	color: #FFFFFF;
	margin-bottom: 0px;
}

h6 {
	font: 0.6em Tahoma, sans-serif;
	color: #FFFFFF;
	margin-bottom: 0px;
}

ul {
	margin-left: 25px;
}

img {
	border: none;
}

#page-wrap {
	background: #333333;
	min-width: 780px;
	max-width: 1260px;
	margin: 10px auto;
}

#page-wrap #inside {
	margin: 10px 10px 0px 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
	
#main-content {
    padding-left: 20px;
    padding-right: 20px;
	padding-top: 20px;
}
	
#header {
    background: #555555;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: #e9ffd9 solid;
    color: #e9ffd9;
    margin: 10px;
}

#footer {
	background: #555555;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: white;
}

b-gray, b-green, b-red, b-blue, b-orange, b-pink, b-purple, b-construction, b-error, b-success, b-notice, b-warning, b-help {
    width: 90%;
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid;
    border-radius: 2px; 
    word-wrap: break-word;
    text-align: left;
    box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3);
    color:#555555;
}

b-gray {
    border-color: #b1bcc2;
    background-color: #e9edf0;
    color: #333333;
 }

b-green {
    border-color: #5fa04e;
    background-color: #c5e5b4;
    color: #5fa04e;
} 


b-red {
    border-color: #f65354;
    background-color: #fad3d4;
    color: #f65354;
}

b-blue {
    border-color: #229ade;
    background-color: #bbe5fb;
    color: #229ade;
}

b-orange {
    border-color: #cf7506;
    background-color: #faf3d3;
    color: #cf7506;
}


b-purple {
    border-color: #af74e8;
    background-color: #ead9fb;
    color: #af74e8;
}

b-pink {
    border-color: #ed5393;
    background-color: #fad3e5;
    color: #ed5393;
}

b-construction {
    padding-left: 60px;
    border-color: #cf7506;
    background-color: #faf3d3;
    color: #cf7506;
    background: #faf3d3 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEa0lEQVRYR+2XX2xTVRzHP/f2dhuLuohuGB+MDDBAtrZrVwZhmBDJovEBGKED8QVi5h50IhGiifpiiEQNTMMfs/i2h12YgxjUCfiigagxJGwy0tFR6P6xu/9j0HXt/WNO2+E2WBPXJrxwHu7tOd97v+dzfzm/3zmVeMRNesTz8xhAREC5e4qL2TbKRMe0wDATd9FsMigySMlYCS1t3YKoxV95PsqF7VP6r4XjTZM/kK3EWFFwj6LlAxBTwJL4szOf0PAT5NgNJCwK8+9StGzh+tJnJihePkLkwhYWbSdPAOQbzQw0GL/z9VefItvsbCu5yUfbOyEKyPDJqZWcbV1Kjl3HsCQqXcEF6eIDozGD+sN7KRnYjH0bBQKgINaMdin3Wz7+ooXcHJmoofC6M8gHlZchBtjhy2YPP7ctI0sxiOrygvSfWguRrAhbtu/hvSVbkbawJA4w2YSWs3YbR47f4vzV1WQpJlO6zKvOTvZW/gG6WClQd3od51pXxCEWoh9pXsfZy4Ws3/AKnxXtQdqcBLh3Ci3X5YWpvzl6ppwLbaux2wwiuo2K4g5qK39LQNjh6JkNXGhbldQVKor9/0uvayrn6h0f322snQPgXAzGCGRD/fcv03LFiYXMZDSbTY5r7Pf9CCIzsuFE0yZ+ueJADERi9vl1yWIqqlDhaGOf71zifTscO7uDmqUqytZEBPJv1HO6YHFW+V1pGXZ5imzFQFZkcq2bYIChQ0xPpKbNBlk2kBSIlzGRlql0C0bNFRi6iWnJINvII0D/sHHxxbeoFBZPAi8Az79z4PB5r3sVHR0BwhGdus/3vUZiGabT7O8eONxS6l6N3x/gXkTnm0PvVwB9QFe8EAGLgOcOHqq7Xup20hEIEA5H+HB/7UpgNJ3ZgacPHqrzz/F9CegHJmfuBQXHjp/QvB4v/s4bhCfGqKl5ewkwkCZASt9ZAA0NDdqasrUEAkHGxwbZtevNjACk8p0FcPLkSc3rLSMYCjEyqOHz+TICkMp3FoCqqpqndA3dPb0M9vdStWNHRgBUtVHzlJbR3dvLkNaHz1d13/cBgBK3l9taP7d7Quzc+UZGABobGzW3x0u/pqH19eCrSgHgKvEwODRMT1cQh8uDHothmhamaWJZZuK3ZWKZFoa4G6JvxPtiXOjiOUMUDcvCMEwmxoZwuUsZHB6mrztEVSoAZ4mb0dExum4FkeKHgOTB4CGHp3j4/rvMSpbpYcsC0zRwlnjivt2hm6kBHC43dyYmCAU7xYMZKUSqqrbM8Z1/DRQ7XITDkwRvXBcAGSlEqqr65/imBohEonQGrlFVlaksUDUB8DDfB7KgqNiFrsfo8LdnFGA+3wcKkcPpxjAN2v9pnbVY0ijHBaIQzec7EyC/vr7+TF5e3noxWTgcbt+9e/dGYDCNycWrs3zHx8cvVVdXb532nQkwvS0/m0yuYSAE3EkTYKavsBoS2zAwcT+LkxNMb8s5yf6UCASJw1g6ba5vRGzD076P/5o98gj8C6TYsuRhiAJVAAAAAElFTkSuQmCC') no-repeat 10px 50%;
}

b-error {
    padding-left: 60px;
    border-color: #f65354;
    background-color: #fad3d4;
    color: #f65354;
    background: #fad3d4 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEKUlEQVRIS7WVW2wUVRjHf2dmu23pdlm20AvQ5aJoEBIDCRIQURFKIuwSIYKJUhFfSDS+GMOTUi8xRl+MiUFNDC/eHrhICypEIgaFJkBSxIZbt7Vrt9vupfdt2Z2Zc8xMsbJsW+oDk8xMzvm+7/875/+dzAju8SXusT7/C3B10zN7paD6oWNHXp3qwqYMuLYhpEqXLkAJjeSfYR4+WT+l2ikl3agJqcrgo7j1LCqZIJMVhM9HWH7iyF3r75rQHtq+T/OV1pWvXojR0gJCx+XWibT0k05n65YdO/z2ZHbdFRB+crOauydE5teTiLIqQKHiXbi8fi7/EWflie8n1Zg0GNm0LV6yYvGsIq2Hgse3ULC2xlls9vRJzEMH6EkXEOse6n7khyOVE+1icsDGrapy13oyp3/C89nRHI2B2iCFFbO5fC3FioZDE+pMGIjWbFHe0Bpc6RhmWxue/YdzATufxlURYKA/TVt0kNU/Hh1Xa9zJWGj7O1pZ6Zv+p5aQDbchYx35gF0hXOXVuFE0t/UynDXfXV1/8K07rRofsG6z8r6wAWKtzqmRsU48n3ybU9v3xFK02fPRDAPLNY0LSYP1Px/P08ubiAefrS94YG6weFkA1RHFSiUxL55j+qmrOYDUgmno1feDYeG2FE1/JekaVg3b0snQ7Yn5gG21yvfcKkZOHEX29qDpbmRrC77zsVzAIu8YQJjgloKG5g52pFM5mjmDrrUbOwsXVVS59W7M4QzYnyqpkOHr+BqjEwKUoXBZ8HdqiKZEf+T5oZ55/yaPAboqAkFrxKz3f1iL8XsjyuVytu8A2lrxnW3PBSz2o1fNd3JsgDAkpULn4PUoAhHaMZhssAvGALGimcpb9xJWuAkMhbKj5i1AXy8F6zZT8vp7DmTog71kvjuA7q8Gw3QAGBJdCkbSWY53xHl5pM/Rdh6J8sA+ysvqpr24CuvKdUBDSTkKsCRkDYyWK8iuXgcgvCUI73R0b2UOQJmKUiU41ZkkOXLz853D/XscQJfmU94v38A88wvoLkd0DGBbFI/h+fgbXEuWOwDz0gUGdm9Fmz5zzCJ7B5gKzZDYTf8qEuWVzKAQiRlzGt3Bx1ZqARcqngKl8gHhG/gaO3J78KAPfc7CPIANKrSguW+QpsGBhEgUzVKe/a+RPXsGobvBMvMB7a34fruzyTPRqwLjAmxIsRJ83dmJSMyarzwf7SJ77hwC255R32+3iHQavH5K3v8UraySgdpNmK3X0H2zx3qgblnkWGVI/Lj4IhpBJHxz2ouCawLiPg0GR/4DmBbCvi2JUIqbl5rByNq/A0RxMeg6hb4KyIweUy072gNb3G3CxVSfbdHoKeqeMbddKQKUe5CWQkqJJQSWVFhKYaGcsbTboyznbSiFtCTmrbhpydF8JImbWSwlI7uH++f9A1ILSN66QmVDAAAAAElFTkSuQmCC') no-repeat 10px 50%;
}

b-success {
    padding-left: 60px;
    border-color: #5fa04e;
    background-color: #c5e5b4;
    color: #5fa04e;
    background: #c5e5b4 url('data:image/png;base64,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') no-repeat 10px 50%;
}

b-warning {
    padding-left: 60px;
    border-color: #cf7506;
    background-color: #faf3d3;
    color: #cf7506;
    background: #faf3d3 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEeElEQVRIS7WUW2xURRjHf7NnL2ULRaAtIJeWYlAiIDEYMASFCFYDLfESE4wkIiZUiyRqhMQEgRolWAIansCHEoHw0GKkIARQCSFV0gcx2iK0lLSlt+12d9uy7fb0nJkx57RsxJZSHzjJuc3M9//N9/9mRvCQL/GQ9flfgIYjq7dJKWbkvH1682gnNmpAw7crdXDOU6ANYtevMqfgwqhiRzWosWSVTl+6Bm+KCWYb/QnB7ct/Mbfw/APjHzig9Vj+Ds/YiTsnPD0fu+saaC9en0FbdZREZ3zn4xtP7xrJrgcCmg4t15l572KFTiJ8010tbTZh+NKpvVjH/C0jZzEioO3Y6vYxTyzO8I/voPlmCxWhtXg8giXpJ5n+qJfukJ9wbTg0r/DMlPtlMTLg8It6Uu6bWO3fU/zDoqRGe3sHe9bfwp86g9pfm3hy06n76ty3I3x0lU59Jh/D14Tsvsn2I4+5gM7OGM3NtynbBUZgFj2dcZqqwywsPDus1rCNkdL8IpGWsT1t4SKszhp0op4PDmQQDrcTj/fQl+jl/NcTXYDPq6n7vQ0zYX6+YFP5Z/+1alhAx3crdOpz68C+4a4a3dtI7uZWtJJYloWUkot74ogxOXh0P9JOparyDs9u/XmI3pCGaFleuW/a3LxAdg66twHZF0JGLrPqk3RsKVG2REqbS0U1GMEckBKv0FyvjNDenDiVe6gn/99ZDAHESl/XY5fnYTYfR/dHEMKP7rrJ81tnIG0bpSRKKip2N2AEZ7sAJPiE4KeyOtaU9N6jec9P5LtlLf7s2VO9k1qQpglagNbo7hqWbslAOuJKoZXmyldNSYC2NAbQVt9D1dVw49qSnqy7WSQB0X3pebLPLE9750Ps1kto4R2YnQu4xeL3xw2Ia+fWVO4PYwSy3DEOQEhFMGBw5kQ9eEV+3sE7pxxIEtDxRYpOfeMjVF8l2Brt9KpBgBllRYFJd59GKxiXovhlbxeGMR2k7QKwFR4EZrfJ+XMtrDuecLXdR+yb9B2Mz9yZ8sJKVLQatMedqQtQztuirqoWbVnJ+mVnBzE8k+8BOKBgQPDb5RDhSO/B1w73FbiAyA6PTi0oRrafAeFzhZMAx6JEC431cQ5UvOICCpeUMTPTj8c7KWmRkwFSI2yFsCWl5U1sKDWFiO6bcMW/6KXFnmk+dE/YOcqGArpreXX3AmKxKFZ/P8HgGM5+Wo2RMmsIAEvhE4q6G11crYmHRezLFB3cWIQVuoAgANhDAI01t1m/dyKW1Y9t20hbUvJeJ/PnTRkWgCUJGJoT51oRsf3pOvjWx1ihiwjlA+34LtHcrYEGq4cNRZqq+l6UlMyZ5uXItgiGMTVZA+1YNFhsbEmaH47+2IKIFY9vCCx5eSZZHjB7BwGD4tpGKIUQms5b1zhXYbgO5i6D1KAHX2AyWAOryOMAbA1S4dWKv/+M8kdNfGAVRYsfadBKzyQzA2U5G0khlXC/pdIoJ04LtNS4uUmNLfXgsaEdTWxLIm3lbGrCHX1YSjeuO5rI+gcRNZ4/+8w0rgAAAABJRU5ErkJggg==') no-repeat 10px 50%;
}

b-notice {
    padding-left: 60px;
    border-color: #229ade;
    background-color: #bbe5fb;
    color: #229ade;
    background: #bbe5fb url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAFk0lEQVRIS42We2wUVRTGv3vnsbMPdrstlGctBUqLFEoUYkUKahUtiH8gQomaSAGBJUGJEo2SGI0ECSAK6ZaHgMZEClQ0KdhErDGUAAY0VB7lUduCFVNadtlt9zE7M/eamW1poTycvza555zf+b5zH0twn0+c6S/UNa0EiWAx4uEseIYlo0MtgOJuguytFiWpQj/kq71XGXK3BXlmeV4ieqPOmzGE5k1/CKNyB2LEUDc8NjFZX9XR+E8YDRdacfZwC4JXW5jsSMtPHFp29s56fQFF5WUgYd/0pY9icsFwpEMBSQjQVAquJ8OJyCHZGLhsIER1/H4pgMpPDgPc7UfNsuW9IbcDijftT8/sP2fR6qcwjAMsIsFIUHxxug2ZbhmK0BN+MajizQkDIMgM1KmhPqFi34ZjaG1ur0T1ype7Ibcy6IztZQNGenxL338CwxIi1LAAVedoi+moag7j4MwsDHVJoADijKOg8jJeyHRjgF2ETSSwuQ3ctBNsXFOL65cDfvbjG5YSC+Ca92VeZzhyZt2uEgzUCII3gIthFX93aDCbvhxKoPL54XjYa7ulPm/PRYz0yDA4kNFPQo7bBm8a0CpxvFtaAZfbOa5z76KzSQXFm43ZiyfQuZPH4FyzjjOBuFVYY9xaNgFVM7Iw1CmCUoKozlB4oAEj3DJkSmBGmaBxqQrGDhex71g9Duw4zVC9QiD9Sr4p5CnCEf+aIpxsSOBKu2Yl0V7T+aM9jtLcVKtTE2wW+/hkKx4f5IBHpmiN6jB7STCOzP4SJo2S4fugBuSmMZUIs3aWzVmc75uUn4Gj56KwCwQG55B6EeqDKnJSbDjZFkMkHAYRRQzyuDCml2WmWoEQxAyOKWMdOH6qET98dd5PMGtb44cbZ2TVtxlQYj1tH70W6fE7TcEojw15aYo1NFPB53VtiGrMiol1dqA4Z7D127SPuYCsFI517/3URDBjC1+5cz7+re+AzMw9AvxyNQxZFG4BTN+/LsrAGK8CzawOYPz2WlBJAaiZ0zXKnMHQOUeCMniz7Shfsh9Eev1b/tanz+JqXSfckoDq5hCIIEALtgGCABgGWDyCfa8VYtoQl1W8U2PI3nbcWjMBhAqAKAGMWUoiuoH0sXZsXV0D4nhxLS/dsgAdDSpqroShhdpASE/3ZkHODeydO+nuADOgC8LUCKjdjaLsgUgZrWDXkq0gtGg1X7VrBfbWtiLeHrCKPQgQ1hhyuhV0GykI4JoKQkXIHhfmP52B9aWbQZTnPmocs/KlrGvNQZB4cmh3fncqMAG5238D17XbQjnTLQC3CxiSmYL6Td81EcfstWXOKRN9UnoKWCBu+dgHwHR8P/8xFAxyWuM0ZzD6LoDuPJpqh9YeQuToKT/pV/JZIU31HvEUTYR2vQNcvb0rawZMx6FXCzAhzQ6BEutADS8/0UeBGUskAdIgD0I1p8ACwanW/nLO22i4n5lMBVGE3tFXhQmoeqUAj/R/MED0OGDoOsI/H2ORvW8n71/XwvI8QumZ1CcLoEfjMGKJ26z6XwBKIdhliA4FgV9PgDM2rnPnsq7LzoQs3lomDUj1ecbnQgvHYMR7ICZg9+yJSHckX7TrUR0LD55LWmQdNEBQZEhuO0J/XoDWFvB37ljac113D8exfOd+OdU7x5M7EkxNQI8nwA1ubT8q2zEtewjcEkXV+RYrhXMGIhCIigxqkxG68BcSgWBltGxh3wenG+JesbsMoujzZI8GtctgmgE92gEiKRCcnq4wBj10A6LdCSoJYLEEQpcvAbruD29ecJ8nsyvd+05Fnm6odaInhdrSU2FTnNbusO5k6+QScM2AGo9AvR6AHrrJRMGWH9xQ8j8e/V6HwLtqTyGTaAnnvBiMZRGbkrRGjZveNxFCqqnGKoLr59/zb8t/wrqBjjWYLWUAAAAASUVORK5CYII=') no-repeat 10px 50%;
}

b-help {
    padding-left: 60px;
    border-color: #229ade;
    background-color: #bbe5fb;
    color: #229ade;
    background: #bbe5fb url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADoklEQVRIS62WbUxTVxjH/+fe25QiiOHNJoKyuCbOmmniGGNRQlEU3aLB+LI4E5clxmUxuGzqsizZqh9M/KCZWzQ6Mu2MsOkH3WYCKJUVVILR6WxE6MK4QKCULhakpe3tfTnmcPXDWKHV7ny458N5zv93/s855zmXYIZWVue3zCnKLH8zl99aaDSsZqEqVdkXYxIV+wNqS+eg5HBuzb45nQyJN7DlIuWVAnlnuZn7YW0ejywBeKwAjzUgqgCEACYOyBWA+p4IOjwT25u35f0UTysu4Msu9dOP5nNHQxowKAMjMYAFalSXoARQnqmZBaBJnIDbE/7AtSP/x6mQuIDPHiri+/P5os4wQJgoiyJ6p1JAoXrPhhQNSDcAF9oDzY3VOWuSAqy9Ht5ztNj03R9hwMgBhAO8UUCKUZhnEYRlZkN3ogHgeeCWJ4i68tn/WXBcB+84J77atdh4MMzxaPfFIPqkJlmWHTTC+YhJq91dkm0ZlHQHzAmzdl8M4nxZkgBmc7Mz+HEworwmZchfuGz5oefWS876LcfW5/7VFiWT6aNUT527Zxz1lVnJOWBidjvl7HbCMvCvZjs/0ujYlF91xgsIbF+oBsITtN7+J3TtvbmZSe3BdGe6uHZo24HVOT/nZBjROqqBpxRUIAjFKJxXxEP3D1i+fmlA2ZmhwjXLsgY2W2bhWJ+KMQUIxAg0gcOd2keR4ClretL3IF7gyjp/+OSGPNOH9xREowDHspdmgPiriPEHvQvgrBx4eUD13Zojh5cc7wgJ8ARUcISCJwL6rvbjyb2+ArSsGnqhUjE1OO/zHvH0voVF+9slCOxwEoKgPwbvufY9aKs6MVM9i3sPpk4o/n6YWovz0dobBaEE1EAwfNmDqGNZwvkJAxison6EqguyIQ6r+qEXAN/Fzo5Y3fLSmVbPxpICmPd1U3V2GiJPNECm0HiK6MOBR1pzhfV/ASQSSXkP8PZvFRkLzZeW2gqzfP1B/O3qbkLrhnXJgBOn6K3L6ypqVjRstOWg1i1hdFxFyavpuLS3wYu2d+clgiQEGKtvOL89vWLVbkcAkDW9hIIDen3A3eulcNd0pJSiuXsf3LFuX/xGS8MoYCCAqgJUAfxB4PerO9H1ybmUAIYq55+lB21L234ZAThJfzdZjfaNAbdvlaIrRQewnqp6ff+mRnf3BMDqj8YcgDkYgmN5Qcp7MCmw6JtdmPfKcZjSTJO/FN4BFzIHK+GyP3/7p+U8BTHzdShmcsKzAAAAAElFTkSuQmCC') no-repeat 10px 50%;
}

[data-title] {
    border-bottom: blue dotted 1px; /*optional styling*/
    position: relative;
    cursor: default;
}

[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    top: -33px;
    display: inline-block;
    padding: 6px 10px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
}
  
[data-title]:hover::after {
    content: '';
    position: absolute;
    top: -16px;
    left: 8px;
    display: inline-block;
    color: #fff;
    border: 8px solid transparent;	
    border-bottom: 8px solid #000;
}

.btn {
    background: #428bca;
    border: #357ebd solid 1px;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    min-width: 60px;
    position: relative;
    transition: color .1s ease;
    /* top: 40em;*/
  }

  .btn:hover {
    background: #357ebd;
  }

  .btn.btn-big {
    font-size: 18px;
    padding: 15px 20px;
    min-width: 100px;
  }

  .btn-close {
    color: #aaaaaa;
    font-size: 30px;
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 0;
  }

  .btn-close:hover {
    color: #919191;
  }

  .modal:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }

  .modal:target:before {
    display: block;
  }

  .modal:target .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    top: 20%;
  }

  .modal-dialog {
    background: #fefefe;
    border: #333333 solid 1px;
    border-radius: 5px;
    margin-left: -200px;
    position: fixed;
    left: 50%;
    top: -100%;
    z-index: 11;
    width: 360px;
    -webkit-transform: translate(0, -500%);
    -ms-transform: translate(0, -500%);
    transform: translate(0, -500%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
  }

  .modal-body {
    padding: 20px;
  }

  .modal-header, .modal-footer {
    padding: 10px 20px;
  }

  .modal-header {
    border-bottom: #eeeeee solid 1px;
  }

  .modal-header h2 {
    font-size: 20px;
  }

  .modal-footer {
    border-top: #eeeeee solid 1px;
    text-align: right;
  }

  /*ADDED TO STOP SCROLLING TO TOP*/
  #close {
    display: none;
  }

  .terminal {
    width: 100%;
    padding: 30px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
  }
  
  .terminal__window {
    width: 100%;
    max-width: 800px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
  }
  
  .terminal__window-header {
    text-align: center;
    background: #3c3f40;
    border-radius: 5px 5px 0 0;
    color: #e4e4e4;
    padding: 8px 50px;
    position: relative;
    border-bottom: 2px solid #676d6f;
  }

  .terminal__controls {
    position: absolute;
    top: 50%;
    right: 0;
    padding: 0 10px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  
  .terminal__controls:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #8c7c2b;
    vertical-align: middle;
  }
  
  .terminal__controls:after {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #a24646;
    vertical-align: middle;
    margin: 0 0 0 5px;
  }
  
  .terminal__window-body {
    border: 2px solid #3c3f40;
    border-radius: 0 0 5px 5px;
    max-height: 354px;
    overflow-y: auto;
  }
  
  .terminal__screen {
    width: 100%;
    min-height: 350px;
    padding: 15px;
    background: #101010;
    border-radius: 0 0 3px 3px;
    overflow-y: auto;
  }
  
  .terminal__screen > span {
    marign: 0 0 5px 0;
  }
  
  .screen__row {
    display: block;
    line-height: 1.5;
    color: #d4d3d3;
    font-size: 14px;
    font-family: Monospace, Arial, sans-serif;
    min-height: 15px;
  }
  .screen__row.tab {
    padding-left: 30px;
  }
  .screen__row:last-of-type:after {
    content: '|';
    font-weight: bold;
    -webkit-animation: cursor 1.5s linear infinite;
            animation: cursor 1.5s linear infinite;
  }
  
  .screen__success {
    color: #47cf73;
  }
  .screen__primary {
    color: #0ebeff;
  }
  .screen__default {
    color: #d4d3d3;
  }
  .screen__warning {
    color: yellow;
  }
  .screen__danger {
    color: #e85757;
  }
  .screen__dark {
    color: #888;
  }
  
  @-webkit-keyframes cursor {
    0% {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
    75% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes cursor {
    0% {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
    75% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  table {
    width: 800px;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  th,
  td {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }
  th {
    text-align: left;
  }
  thead th {
    background-color: #55608f;
  }
  tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
  tbody td {
    position: relative;
  }
  tbody td:hover:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -9999px;
    bottom: -9999px;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: -1;
  }

Here is the HTML and Markdown template

<div id="page-wrap">
	<div id="inside">
		<div id="header">
			<h2>Header</h2>
		</div>
		<div id="main-content">
			<h3>Standard Template for Joplin Notes</h3>
			<h6>Created by Jessica Brown 21-AUG-2020</h6>
			<p>
				<span data-title="Here is some text for example">Hover me</span>
			</p>
			<p>
				<a href="#modal-one" class="btn">Modal!</a>
			</p>
			<p>
				This will be the layout for almost everything in this Joplin notes. I will be making tweeks here and there, but overall I believe this is a nice easy template to understand and work with.<br />
				<br />
				<b-construction>
					This template is still under construction.
				</b-construction>
				<b-notice>
					<b>NOTICE:</b> This is a &lt;b-notice&gt;&lt;/b-notice&gt; box
				</b-notice>
				<b-success>
					<b>SUCCESS:</b> This is a &lt;b-success&gt;&lt;/b-success&gt; box
				</b-success>
				<b-warning>
					<b>WARNING:</b> This is a &lt;b-warning&gt;&lt;/b-warning&gt; box
				</b-warning>
				<b-error>
					<b>ERROR:</b> This is a &lt;b-error&gt;&lt;/b-error&gt; box
				</b-error>
				<b-help>
					<b>ERROR:</b> This is a &lt;b-help&gt;&lt;/b-help&gt; box
				</b-help>
			</p>
			<p>
				<div class="terminal">
					<div class="terminal__window">
						<div class="terminal__window-header">user@comp28~<div class="terminal__controls"></div>
    				</div>
					<div class="terminal__window-body">
						<div class="terminal__screen">
							<div class="screen__row">
								<span class="screen__success"><b>user@comp28</b></span>
								<span class="screen__primary">~</span>
								<span class="screen__primary">&#36;</span>
							</div>
							<div class="screen__row">
								<span class="screen__success"><b>user@comp28</b></span>
            					<span class="screen__primary">~</span>
            					<span class="screen__primary">&#36;</span>
            					<span class="screen__default">git log</span>
          					</div>
          					<div class="screen__row">
            					<span class="screen__warning">commit 5ac05326d918acc74afd9e9caede75d64aa3e5f5</span>
          					</div>
							<div class="screen__row">
								<span class="screen__danger">Author:</span>
								<span class="screen__default">jessica@jbrowns.com</span>
							</div>
							<div class="screen__row">
								<span class="screen__danger">Date:</span>
								<span class="screen__default">Fri Aug 21 13:50:44 2020 -0500</span>
							</div>
							<div class="screen__row"></div>
							<div class="screen__row tab">
								<span class="screen__dark">My First Commit</span>
							</div>
							<div class="screen__row"></div>
							<div class="screen__row">
								<span class="screen__success"><b>user@comp28</b></span>
								<span class="screen__primary">~</span>
								<span class="screen__primary">&#36;</span>
							</div>
						</div>
					</div>
				</div>
			</p>
			<p>
				<table>
					<thead>
						<tr>
							<th>Column 1</th>
							<th>Column 2</th>
							<th>Column 3</th>
							<th>Column 4</th>
							<th>Column 5</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Cell 1-1</td>
							<td>Cell 2-1</td>
							<td>Cell 3-1</td>
							<td>Cell 4-1</td>
							<td>Cell 5-1</td>
						</tr>
						<tr>
							<td>Cell 1-2</td>
							<td>Cell 2-2</td>
							<td>Cell 3-2</td>
							<td>Cell 4-2</td>
							<td>Cell 5-2</td>
						</tr>
						<tr>
							<td>Cell 1-3</td>
							<td>Cell 2-3</td>
							<td>Cell 3-3</td>
							<td>Cell 4-3</td>
							<td>Cell 5-3</td>
						</tr>
						<tr>
							<td>Cell 1-4</td>
							<td>Cell 2-4</td>
							<td>Cell 3-4</td>
							<td>Cell 4-4</td>
							<td>Cell 5-4</td>
						</tr>
						<tr>
							<td>Cell 1-5</td>
							<td>Cell 2-5</td>
							<td>Cell 3-5</td>
							<td>Cell 4-5</td>
							<td>Cell 5-5</td>
						</tr>
					</tbody>
				</table>
			</p>
		</div>
		<div style="clear: both;"></div>
			<div id="footer">
				<p>Footer stuff.</p>
			</div>
		</div>
		<div style="clear: both;"></div>
	</div>
	<div class="modal" id="modal-one" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-header">
				<h2>Modal in CSS?</h2>
				<a href="#close" class="btn-close" aria-hidden="true">×</a>
			</div>
			<div class="modal-body">
				<p>One modal example here! :D</p>
			</div>
			<div class="modal-footer">
				<a href="#close" class="btn">Nice!</a>
			</div>
		</div>
	</div>
</div>