html { font-family: 'Open Sans', 'helvetica', sans-serif; background: white; font-size: 14px; } /* Titles */ h1 { text-transform: uppercase; display: block; } h1, h2 { font-weight: normal; margin-top: 50px; margin-bottom: 10px; } .mobile-menu { display: none; } .mobile-only { display: none; } .title { font-size: 2.5em; text-align: center; margin-bottom: 50px; text-transform: none; color: #3a7c78; line-height: 1; font-weight: 600; } .latest { padding: 10px 10px; border-bottom: 1px solid #eee; } .post_detail { font-size: 2em; line-height: 1em; } .entry-content { margin-top: 50px; margin-bottom: 50px; text-align: justify; color: #333; } article section .about { font-size: 18px; color: #444; text-align: justify; } article section .blog-post { font-size: 16px; } /* Body */ body { margin: 0px; } article, footer { line-height: 1.6em; display: block; max-width: 700px; margin: 40px auto auto 355px; padding: 20px 80px 10px; } article ol.posts { padding-left: 0; } /* Articles */ article > header { list-style-type: none; padding: 0px 10px; box-shadow: 0 0 0 2px #3a7c78; -moz-border-radius: 5px 0; -webkit-border-radius: 5px 0; border-radius: 5px 5px; } .article_left > h1 { font-size: 20px; } .article_right { background-color: white; } .post_list { list-style-type: none; padding: 10px 10px; -moz-border-radius: 5px 0; -webkit-border-radius: 5px 0; border-radius: 5px 5px; } /* Links */; a { color:#3a7c78; text-decoration:none; } a:visited { color:#3a7c78; text-decoration:none; } a:link { color:#3a7c78; text-decoration:none; } a:active { color:#3a7c78; text-decoration:none; } a:hover { text-decoration: underline; } /* Code */ .highlight pre { font-size: 14px; overflow: auto; padding: 8px; } /* Sidebar */ aside { font-size: 14px; width: 220px; height: 100%; position: fixed; top: 0; left: 0; padding: 30px; background-color: #3a7c78; color: white; box-shadow: 0 0 3px black; text-align: center; padding-top: 5em; background-size: cover; display: flex; flex-direction: column; } aside > ul { list-style-type: none; padding: 0px 10px; margin-top: 0px; } aside > h2 { text-transform: uppercase; font-size: 14px; margin-bottom: 5px; } #avatar { margin: 0; margin-bottom: 20px; } #avatar img { max-width: 100px; display: block; -webkit-transition: 200ms; -moz-transition: 200ms; -ms-transition: 200ms; -o-transition: 200ms; transition: 200ms; } .nav { display: block; margin: 40px -30px; } .nav > ul > li { font-size: 15px; } .nav a { color: #fff; text-decoration: none; -webkit-transition: 200ms; -moz-transition: 200ms; -ms-transition: 200ms; -o-transition: 200ms; transition: 200ms; } .list-bare { list-style: none; padding: 0; margin: 0; } .nav__link { display: block; padding: 0.77273rem 0rem; border: 0px solid #73d08a; margin: 0px 5px; border-radius: 10px 10px; } .nav a.active { background-color: #4e8986; font-weight: bold; } .nav a:hover { background-color: #73d08a; color: #3a7c78; } #mobile-menu { display: none; } .blog_roll_link { display: block; padding: 0.33147rem 0; border-bottom: 0px solid #73d08a; margin: 0px 5px; border-radius: 10px 10px; } .liveactive { font-weight: bold; animation: blinker 1.7s cubic-bezier(.5, 0, 1,1) infinite; -moz-animation: blinker 1s linear infinite; } td.icon { width: 15px; text-align: center; vertical-align: top; } td.hours { width: 100px; text-align: center; vertical-align: top; } /*--------Responsive------------*/ @media screen and (max-width: 1024px) { aside { left: 0; max-width: none; position: relative; top: 0; width: 100%; padding: 0; padding-top: 1px; } .mobile-only { display: list-item; } .nav { margin-left: 0; margin-right: 0; } body > article { margin: 0 auto; padding-top: 5px; padding: 1em; } footer { padding: 1em; margin-left: 1em; margin-top: 0; } #avatar { height: 50px; margin: 10px auto; } #license, aside #partners, aside .social, aside nav.nav { display: none; } aside .sidetitle { display: flex; align-items: center; justify-content: space-between; padding: 0px 0px; } aside #avatar, aside .sidetitle h1, aside .sidetitle span { flex-grow: 1; display: inline-block; float: left; margin: 0px; } aside #avatar img, aside #avatar img a { padding: 0px; max-height: 100%; } aside .sidetitle h1 { flex-grow: 4; padding: 0em 0.5em; text-align: left; } aside .sidetitle span { float: right; padding: 0px 0px; border: 0px solid #73d08a; border-radius: 10px 10px; } aside .sidetitle span a { color: white; float: right; border: 1px solid white; padding: 0.77273rem 1rem; margin: 0px 5px 0px 0px; border-radius: 10px 10px; } } @keyframes blinker { 50% { opacity: 0; } }