body { margin:0; padding:0; background-color:#2B3856; font-family: arial, sans-serif; color:#222; } a, a:active { color: #353c69; } a:visited { color: #483569; } a img { border:0; margin:0; padding:0; outline:0; } img { display:block; } p { margin:0; padding:12px; } h4 { text-align:center; } .grid_1_4, .grid_1_3, .grid_1_2, .grid_2_3, .grid_3_4, .grid_1_1 { float:left; overflow:hidden; } .grid_1_4 { width:25%; } .grid_1_3 { width:33.33%; } .grid_1_2 { width:50%; } .grid_2_3 { width:66.66%; } .grid_3_4 { width:75%; } .grid_1_1 { float:none; width:100%; } .left { float:left; } .right { float:right; } .center { float:none !important; margin:0 auto; display:block; /* set a width */ } .autowidth { width:auto; } p.center, span.center, h1.center, h2.center, h3.center, h4.center, h5.center { text-align:center; float:none; } p.left, span.left, h1.left, h2.left, h3.left, h4.left, h5.left { text-align:left; float:none; } p.right, span.right, h1.right, h2.right, h3.right, h4.right, h5.right { text-align:right; float:none; } .important { font-weight:bold; display:block; } span.important { display:inline; } .marginized { margin:10px 0; } img.marginized { margin:10px; } .padded { padding:20px; } .smallbottom { margin-bottom:0 !important; } .info { font-size:.8em; } .title { display:block; background-color:#c7cbe3; margin:0 0 10px 0; padding:5px; } .scroller { max-height:700px; overflow-y:auto; } .largeread { font-size:1em; } .header { width:968px; margin:0 auto; background-color:#000; } .header .top { overflow: hidden; } .header .top .ad_spot { margin: 0; float: left; } .header .logo { float: left; margin: 0; padding: 0; } .header .nav { overflow:hidden; border-top:1px solid red; border-bottom:1px solid red; } .header .nav .right a { margin: -2px 0 0 4px; } .comic { width:968px; min-height: 916px; margin:0 auto; background-color:#000; overflow:hidden; } .comic .inner { width:750px; margin:6px auto; } .comic img.comic_image { margin:0 25px; width:600px; } .comic img { float:left; } .comic .nav { float:left; } .comic .nav.center { width: 100%; padding-top: 6px; border-top: 1px solid red; text-align: center; overflow: hidden; } .comic .nav.center a { display: inline-block; } .comic .nav.center select { width:400px; display: block; margin: 6px auto; } .comic .extra { float: left; width:100%; } .comic .extra .nav { width: 100%; margin-top:-56px; } .section { display: flex; width:964px; margin:0 auto; background-color:#a5acd2; border:2px solid #000; /* overflow:hidden; */ } .admin .section { display: block; overflow:hidden; } .section .sidebar { /* overflow: hidden; */ float:left; width:160px; max-width:160px; height: 100%; padding:20px; outline:1px solid #000; } .section .sidebar a .button { margin: 10px auto; } .section .sidebar a .button.special { margin:0 auto 20px auto; max-width:150px; } .section .sidebar p { padding: 10px 15px; } .section .sidebar div[data-fuse="gk_vrec_1"], .section .sidebar div[data-fuse="gk_vrec_2"] { min-height: 600px; } .section .main { overflow:hidden; width: 100%; } .section .main .content { overflow: hidden; position: relative; min-height: 250px; padding: 20px 340px 20px 20px; border-left:1px solid black; box-sizing: border-box; } .section .main .content.has-comments { padding: 20px; } .section .main .content h1, .section .main .content h2 { font-size: 1em; text-align:left; margin-bottom:0; } .section .main .content p { padding-left: 0; padding-right: 0; } .section .main .chapters { overflow:hidden; border-left:1px solid black; padding:0 20px; } .section .main .chapters h3 { font-size: 1em; text-align: center; } .section .main .chapters a { display:table; background-color:#c7cbe3; overflow:hidden; margin:20px auto; color:#222; text-decoration:none; height:62px; } .section .main .chapters a img { float:left; margin:1px; min-width:60px; } .section .main .chapters a strong { display:table-cell; vertical-align:middle; width:100%; padding: 0 10px 0 20px; text-align: left; } .section .main .chapters .fuse-slot { display: none; } .section .main .ad_spot { width: 336px; height: 280px; position: absolute; top: 20px; right: 20px; } .section .main img { max-width:100%; min-width:60px; } .comments { border-top:1px solid #222; margin-bottom:-20px; } .comments h2 { font-size: 1.167em; } .comments h3 { font-size: 1em; } .comment { background-color:#c7cbe3; padding:10px; margin-bottom:20px; word-wrap: break-word; color:#222; } .footer { width:968px; margin:0 auto; background-color:#000; } form { margin:0; padding:10px; } form .smallbottom { margin:0 0 10px 0; } form label.smallbottom { margin:0; } form label { display:block; width:160px; margin:10px 0; } form input[type="submit"] { margin-top:10px; } form input[type="text"], form input[type="password"], textarea { width:321px; border:1px solid #222; margin-left:0; margin-right:0; padding:5px; } form input[type="text"]:focus, form input[type="password"]:focus, textarea:focus { outline:0; border:1px solid red; } form .important { color:red; } textarea { width:481px; min-width:481px; max-width:481px; min-height:80px; } .twitter { margin:10px 15px 20px 15px; overflow:hidden; } .twitter a.info { color:#c7cbe3; text-decoration:none; display:block; background-color:#2B3856; padding:5px; font-size:.6em; } .twitter_feed { background-color:#c7cbe3; padding:5px; font-size:.8em; } .twitter_feed a { color:blue; text-decoration:none; } .chapters select { float:right; margin-top:-42px; } .mobile-spot { display: none; } .extracomiclinks form input { max-width: 100%; padding: 0 10px; box-sizing: border-box; } /******** ADMINISTRATION STUFF *********/ body.admin { background-color:#000; color:#dfdfdf; } .admin .header a, .admin.header a:visited { color:#fff; text-decoration:none; } .admin .header a:hover { text-decoration:underline; } .admin .header a img { margin:0 auto 20px auto; } .admin .section { border:0; background-color:rgba(115, 124, 161); box-shadow:inset 0 0 20px #2B3856; } .admin form { background-color:#2B3856; margin:0 20px 20px 0; box-shadow:0 0 10px #2B3856; } .admin form label { display:inline-block; } .admin .grid_1_1 form { margin-right:0; } .admin input[type="text"], .admin input[type="password"] { width:285px; } .admin textarea { width:445px; min-width:445px; max-width:445px; height:250px; background-color:#ededed; } .admin textarea:focus { background-color:#fff; } .admin form select { max-width:289px; } label.admin { width:100%; cursor:pointer; } label.admin .comment { border-left:10px solid transparent; padding-bottom:0; margin:0 10px; } label.admin:hover .comment { border-left:10px solid #DFDFDF; } .admin #comments input[type="checkbox"]:checked ~ label .comment { border-left:10px solid green; } .admin .comment { margin:20px 10px; } .admin span.right { float:right; } .admin .important { color:red; } .admin_check { position:relative; } .admin_check input { position:absolute; top:12px; right:12px; } .comic_descriptor { margin:20px 0 0 0; padding:10px; background-color:#fff; color:#cfcfcf; box-shadow:0 0 10px #2B3856; } .comic_descriptor h4 { padding:0; margin:10px 0 0 0; color:#afafaf; } .comic_descriptor p { color:#6f6f6f; max-height:300px; overflow:auto; } .comic_descriptor p img { width:100%; } .comic_descriptor .info { color:#222; } input[type="checkbox"].content_display ~ .content_optional { display:none; } input[type="checkbox"]:checked.content_display ~ .content_optional { display:block; } #edit_page_info { display:none; position:fixed; top:20px; right:20px; border:5px solid; } #edit_page_info .comic_descriptor { margin:0; width:250px; } @media all and (max-width: 990px) { .header { width: auto; position: relative; } .header .logo { float: initial; text-align: center; } .header .logo a { display: inline-block; margin: 94px 0 0 0; } .header .top .ad_spot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); float: none; } .header .nav .left { float: none; } .header .nav a .img { float: none; } .header .nav .right { float: none; text-align: center; } .header .nav .right a.left { float: none; margin: -2px 0 0 4px; display: inline-block; } .comic { width: auto; } .section { width: auto; } .footer { width: auto; } } @media all and (max-width: 776px) { .header .logo a { margin: 0; } .header .top .ad_spot { display: none; } .comic .inner { overflow: hidden; position: relative; width: auto; } .comic .inner .nav { position: absolute; top: 0; right: 0; } .comic .inner .nav:first-of-type { left: 0; } .comic .inner .comic_image { margin: 52px auto 60px auto; float: none; width: auto; max-width: 100%; } .comic .inner .extra .nav { position: relative; } .comic .nav.center select { width: 300px; } .section .main .content { padding: 20px; } .section .main .content .ad_spot { position: static; margin: 40px auto 0 auto; } .footer { padding-bottom: 75px; } .mobile-spot { display: block; position: fixed; bottom: 10px; width: 100%; min-height: 50px; } .comments input[type=text] { max-width: 100%; } .comments textarea.largeread { width: 100%; min-width: auto; } .cast-page .grid_1_1:not(.marginized) { margin-left: -5px; margin-right: -5px; } .cast-page .grid_1_1:not(.marginized) img.marginized { margin: 5px; } } @media all and (max-width: 570px) { .header .nav .right a.left { margin: -2px 0 0 0; } .comic { min-height: initial; } .section { display: block; } .section .sidebar { overflow: hidden; float: initial; width: 365px; margin: 30px auto 0 auto; max-width: none; outline: 0; padding: 5px 0; } .section .sidebar a .button.special { max-height: 113px; margin: 2px 2px 0 4px; float: left; } .section .sidebar a .button { margin: 1px 3px; float: left; } .section .sidebar p { padding: 5px 4px; float: left; width: 35%; box-sizing: border-box; } .section .sidebar .twitter { float: left; width: 65%; margin: 0; padding: 4px; box-sizing: border-box; } .section .sidebar .vm-placement { display: none; } .section .sidebar div[data-fuse="gk_vrec_1"], .section .sidebar div[data-fuse="gk_vrec_2"] { display: none; } .section .main .content { min-height: initial; padding: 8px 8px 0 8px; border: 0; } .section .main .content .ad_spot { position: static; margin-top: 30px; } .section .main .chapters { padding: 5px; border: 0; } .section .main .chapters .fuse-slot { display: block; /* min-height: 60px; */ } .footer { padding-bottom: 120px; } .extracomiclinks form, .extracomiclinks form input { padding: 0; } .main .extracomiclinks a { margin: 20px 0; } } @media all and (max-width: 390px) { .section .sidebar { width: auto; text-align: center; } .section .sidebar a .button.special { float: none; margin: 0 auto 8px auto; display: block; } .section .sidebar a .button { float: none; display: inline-block; } .section .sidebar p { width: 100%; margin-bottom: 4px; } .section .sidebar .twitter { width: 100%; } } @media all and (max-width: 365px) { .header .nav .right a.left:last-of-type { display: none; } .main .extracomiclinks a img { float: none; margin: 20px auto; } .main .extracomiclinks a h4 { margin: 0; } }