/* TheKrumblz.com */
/*
################################################
# Mobile First CSS with Large Screen Overrides #
################################################
*/

/* ---------- Reset */
html, body, div, p, span, a, img, center, ol, ul, li, form {margin:0px; padding:0px; border:0px; outline:0px; font-family:arial,helvetica; font-size:16px; line-height:1.125; font-size:100%; color:#282828; text-decoration:none; background:transparent;}

/* ---------- Set Standards */
img {border:0px; outline:0px; background:transparent;}
input {margin:0px; padding:1px 8px 0px 12px; height:30px; font-family:arial,helvetica; font-weight:normal; font-size:16px; color:#32281e; background:#ffffff; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border:1px solid #7f5600;}
select {margin:-1px 0px 0px 0px; padding:1px 8px 0px 6px; height:30px; font-family:arial,helvetica; font-weight:normal; font-size:16px; color:#32281e; background:#ffffff; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border:1px solid #7f5600;}
textarea {margin:0px; padding:1px 8px 0px 8px; height:30px; font-family:arial,helvetica; font-weight:normal; font-size:16px; color:#32281e; background:#ffffff; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border:1px solid #7f5600;}
.cssDate {height:28px; margin:-1px 0px 0px 0px; padding:0px 2px 0px 8px; text-align:center;}
.cssSubmit {padding:1px 8px 0px 8px; text-align:center; font-weight:bold; cursor:pointer;}
.spnMobBlock {display:block; margin:4px 0px 4px 0px;}
textarea {scrollbar-base-color:#ffc5e3;}
a {text-decoration:underline;}
a:hover {color:#800000;}
.checkbox {margin:0px; padding:0px 5px 0px 5px; border:0px; outline:0px;}
img {max-width:calc(100vw - 8px); height:auto;}

/* ---------- Page Body and Wrapper */
body {width:100vw; height:100vh; overflow:hidden; background:#ffffff;}
#page_wrapper {position:relative; height:100%; background:#ffffff;}

/* ---------- Page Header */
#print_header {display:none;}
#page_header {position:relative; background:#000000; border-bottom:2px solid #000000; z-index:500;}
#page_header .inner {height:70px; text-align:left; background:#faf5e6;}
#page_header .logo {position:absolute; top:4px; left:4px; height:60px; width:60px; background:url(../images/kookie_60.gif) top left no-repeat;}
#page_header .links {display:none; position:absolute; right:20px; top:5px; list-style:none; text-align:right; z-index:510; white-space:nowrap;}
#page_header .links li {display:block; float:left; padding:0px 5px 0px 5px;}

/* ---------- Movile Navigation Menu */
#navi_wrapper {text-align:center; width:100%; z-index:602;}
#navi_wrapper #navi_outer, #navi_wrapper > input {display:none;}
#navi_wrapper > label {display:block; position:absolute; top:30px; right:10px; height:26px; width:26px; background:#faf5e6 url(../images/navi_icon.gif) center no-repeat; cursor: pointer; z-index:601;}
#navi_wrapper > input:checked ~ #navi_outer  {display:block;}
#navi_wrapper > input:checked ~ label {background:url(../images/navi_close.gif) center no-repeat; z-index:601;}
#navi_outer {display:none; position:absolute; top:72px; right:0px; width:100%; background:#faf5e6; border-bottom:2px solid #000000; z-index:600;}
#navi_inner {padding:0px;}
   #navi_inner span {display:block; margin:0px 10px 0px 10px; padding:10px 5px 0px 0px; font-weight:bold;}
   #navi_inner a {display:block; margin:0px 0px 0px 0px; padding:0px 5px 0px 0px; font-size:150%; text-decoration:none;}
   #navi_inner .col a {padding:10px 0px 10px 0px; border-bottom:1px solid #000000;}
   #navi_inner a:hover {color:#800000;}
   #navi_inner ul {display:inline-block; margin:10px 0px 0px 0px; width:100%; list-style:none; text-align:center; white-space:nowrap;}
   #navi_inner ul li {display:inline-block; padding:0px 10px 0px 10px;}
   
/* ---------- Desktop Menu */
#menu_wrapper {display:none; position:absolute; left:100px; top:55px; text-align:left; z-index:511;}
#menu_wrapper a {text-decoration:none;}
#menu_wrapper .menu_item {position:relative; display:block; float:left;}
 #menu_wrapper .menu_header {position:relative; width:80px; margin:0px 2px 0px 2px; padding:2px 10px 2px 10px; text-align:center; font-weight:bold; white-space:nowrap; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;}
#menu_wrapper .menu_header a {display:block; width:100%;}
#menu_wrapper .menu_header a:hover {color:#7f5600;}
#menu_wrapper .menu_header a:hover  .menu_header_flag {display:none;}
#menu_wrapper .menu_detail {display:none; position:absolute; top:26x; left:0px; padding:10px; background:#fafafa; border-top:2px solid #000000; min-width:160px; box-shadow:4px 4px 8px #404040; -moz-box-shadow:4px 4px 8px #404040; -webkit-box-shadow:4px 4px 8px #404040; border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px; -webkit-border-radius:0px 0px 4px 4px;}
#menu_wrapper .menu_detail_flag {position:absolute; right:0px; height:100%; text-align:center;}
#menu_wrapper .menu_detail a {display:block; padding:2px 10px 2px 10px;}
#menu_wrapper .menu_detail a:hover {background-color:#000000; color:#ffffff;}
#menu_wrapper .menu_detail a:hover .menu_header_flag {display:none;}
#menu_wrapper .menu_item:hover .menu_detail {display:inline;}
#menu_wrapper .menu_item:hover .menu_header {background-color:#7f5600; color:#faf5e6;}
#menu_wrapper .menu_item:hover .menu_header a {background-color:#7f5600; color:#faf5e6;}
#menu_wrapper .menu_item:hover .menu_header_flag {display:none;}
#menu_wrapper .menu_block {position:relative;}
#menu_wrapper .menu_subdetail {display:none; position:absolute; top:0px; left:100%; padding:10px; background:#fafafa; border-top:1px solid #000000; min-width:160px; box-shadow:4px 4px 8px #404040; -moz-box-shadow:4px 4px 8px #404040; -webkit-box-shadow:4px 4px 8px #404040; border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px; -webkit-border-radius:0px 0px 4px 4px;}
#menu_wrapper .menu_subdetail a {display:block; padding:2px 10px 2px 10px;}
#menu_wrapper .menu_block:hover .menu_subdetail {display:inline;}
#menu_wrapper .menu_block:hover .menu_block_a {}
#menu_wrapper .menu_block:hover .menu_detail_flag {color:#ffffff;}

/* ---------- Page Content: Mobile Version */
#page_content {position:relative; max-height:calc(100vh - 80px); overflow-x:hidden; overflow-y:auto; z-index:300;}
#page_content .inner {position:relative; padding:0px 10px 50px 10px;}

/* ---------- Page Options: Mobile Version */
#page_content .options {position:relative; margin-bottom:15px; padding:2px 0px 2px 0px; text-align:center;}
#page_content .actions {position:relative; margin:0px; padding:5px 0px 0px 0px;}
#page_content .actions ul {display:inline-block; margin:0px; padding:0px; height:30px; list-style:none; white-space:nowrap;}
#page_content .actions ul li {display:inline-block; margin:0px; padding:0px 5px 0px 5px;}
#page_content .title {margin:0px; padding-top:10px; color:#282828; font-weight:bold; text-align:center; text-decoration:underline;}

/* ---------- Social Media: Share Content */
.twitter_share {display:block; margin:0px; padding:0px; width:30px; height:30px; background:url(../images/share_twitter.gif) center no-repeat;}
.twitter_share:hover {display:block; margin:0px; padding:0px; width:30px; height:30px; background:url(../images/share_twitter_hover.gif) center no-repeat;}
.facebook_share {display:block; margin:0px; padding:0px; width:30px; height:30px; background:url(../images/share_facebook.gif) center no-repeat;}
.facebook_share:hover {display:block; margin:0px; padding:0px; width:30px; height:30px; background:url(../images/share_facebook_hover.gif) center no-repeat;}
.email_share {display:block; margin:0px; padding:0px; width:30px; height:30px; background:url(../images/share_email.gif) center no-repeat;}
.email_share:hover {display:block; margin:0px; padding:0px; width:30px; height:30px; background:url(../images/share_email_hover.gif) center no-repeat;}
.print_share {display:block; margin:0px; padding:0px; width:30px; height:30px; background:url(../images/share_print.gif) center no-repeat;}
.print_share:hover {display:block; margin:0px; padding:0px; width:30px; height:30px; background:url(../images/share_print_hover.gif) center no-repeat;}

/* ---------- Content: Simple DIVs */
.content_div_hdr {margin:16px 0px 8px 0px; font-weight:bold; border-bottom:1px solid #808080;}
.content_div_top {text-align:justify;}
.content_div_nrm {margin-top:16px; text-align:justify;}
.content_hr {color:#800000;}
.content_ul {margin-top:16px; padding-left:40px; text-align:justify;}

/* ---------- Content: Simple Navigation Form */
.form_nav_wrapper {margin:0px; padding:0px; text-align:center;}
.form_label {display:block; padding-right:4px;}
.form_select {max-width:calc(100vw - 8px);}
.form_button {margin:5px 0px 5px 0px; padding:5px; height:21px; font-size:70%; font-weight:bold;}

/* ---------- Comic Gallery Navigation */
#gallery_wrapper {position:relative; margin:16px 0px 16px 0px; width:100%; text-align:center;}
#gallery_wrapper .gheader {position:relative; margin-bottom:8px; height:24px; width:100%; font-weight:bold; border-bottom:1px solid #000000;}
#gallery_wrapper .gtitle {position:absolute; left:2px; bottom:0px;}
#gallery_wrapper .gdate {position:absolute; right:2px; bottom:0px;}
#gallery_wrapper .gintro {position:relative; text-align:justify;}
#gallery_wrapper .gbody {position:relative; margin:auto; padding:16px 0px 80px 0px;}
#gallery_wrapper .sbody {position:relative; margin:auto; padding:16px 0px 16px 0px;}
#gallery_wrapper .gtags {position:relative; margin:auto; padding:8px; text-align:center; font-style:italic;}
#gallery_wrapper .gtags a {text-decoration:none;}
#gallery_wrapper .gtags a:hover {color:#800000; text-decoration:underline;}
#gallery_wrapper .gbckact {position:absolute; bottom:5px; left:50%; width:70px; height:70px; margin-left:-75px; background:url(../images/mlact.gif) center no-repeat;}
#gallery_wrapper .gbckdis {position:absolute; bottom:5px; left:50%; width:70px; height:70px; margin-left:-75px; background:url(../images/mldis.gif) center no-repeat; cursor:not-allowed;}
#gallery_wrapper .gimg {display:block; margin:auto;}
#gallery_wrapper .gnxtact {position:absolute; bottom:5px; right:50%; width:70px; height:70px; margin-right:-75px; background:url(../images/mract.gif) center no-repeat;}
#gallery_wrapper .gnxtdis {position:absolute; bottom:5px; right:50%; width:70px; height:70px; margin-right:-75px; background:url(../images/mrdis.gif) center no-repeat; cursor:not-allowed;}
#gallery_wrapper .break {display:none;}

/* ---------- Responsive Columns */
#rcolumn_size3 {position:relative; margin-top:16px; padding-bottom:20px; text-align:center;}
#rcolumn_size3 .cell {padding:4px 0px 4px 0px;}
#rcolumn_size3 a {text-decoration:none;}
#rcolumn_size3 a:hover {color:#800000; text-decoration:underline;}

/* ---------- Content: Forms */
#form_print {display:none;}
#form_wrapper {margin:10px 0px 0px 0px; padding:0px; text-align:center;}
#form_wrapper .form_span {margin:0px; padding:10px; background:#dcdcdc; border:1px solid #000000; display:inline-block; text-align:left;}
#form_error {margin:10px 0px 10px 0px; font-weight:bold; color:#FF0000; text-align:center;}
#form_error ul {padding-left:10px; list-style-position:inside;}

/* ---------- Content: Search */
#search_header {position:relative; margin:10px 0px 10px 0px; padding:0px; height:30px; width:100%; text-align:center; background:#7f5600;}
#search_header .count {display:inline-block; color:#faf5e6; height:30px; line-height:30px;}
#search_header .left_opt {display:block; position:absolute; left:2px; top:2px; width:26px; height:26px; margin:0px; padding:0px; background:url(../images/page_left.png) center no-repeat; cursor:pointer;}
#search_header .right_opt {display:block; position:absolute; right:2px; top:2px; width:26px; height:26px; margin:0px; padding:0px; background:url(../images/page_right.png) center no-repeat; cursor:pointer;}
#search_header .left_dis {display:block; position:absolute; left:2px; top:2px; width:26px; height:26px; margin:0px; padding:0px; background:url(../images/page_left_dis.png) center no-repeat; cursor:not-allowed;}
#search_header .right_dis {display:block; position:absolute; right:2px; top:2px; width:26px; height:26px; margin:0px; padding:0px; background:url(../images/page_right_dis.png) center no-repeat; cursor:not-allowed;}
#search_footer {position:relative; margin:10px 0px 10px 0px; padding:0px; height:30px; width:100%; text-align:center; background:#7f5600;}
#search_footer .left_opt {display:block; position:absolute; left:2px; top:2px; width:26px; height:26px; margin:0px; padding:0px; background:url(../images/page_left.png) center no-repeat; cursor:pointer;}
#search_footer .right_opt {display:block; position:absolute; right:2px; top:2px; width:26px; height:26px; margin:0px; padding:0px; background:url(../images/page_right.png) center no-repeat; cursor:pointer;}
#search_footer .left_dis {display:block; position:absolute; left:2px; top:2px; width:26px; height:26px; margin:0px; padding:0px; background:url(../images/page_left_dis.png) center no-repeat; cursor:not-allowed;}
#search_footer .right_dis {display:block; position:absolute; right:2px; top:2px; width:26px; height:26px; margin:0px; padding:0px; background:url(../images/page_right_dis.png) center no-repeat; cursor:not-allowed;}

/* ---------- Page Footer */
#print_footer {display:none;}
#page_footer {display:none; position:fixed; bottom:0px; width:100%; background:#000000; text-align:center; z-index:400;}
#page_footer .inner {height:40px; font-size:90%; background:#ffffff;}
#page_footer .inner a {margin:0px; padding:0px 10px 0px 10px; text-decoration:none;}
#page_footer .inner a:hover {margin:0px; padding:0px 10px 0px 10px; color:#000000; text-decoration:underline;}

/* ---------- Social Media: Account Links */
.youtube {display:block; width:30px; height:30px; background:url(../images/link_youtube.gif) center no-repeat;}
.youtube:hover {display:block; width:30px; height:30px; background:url(../images/link_youtube_hover.gif) center no-repeat;}
.instagram {display:block; width:30px; height:30px; background:url(../images/link_instagram.gif) center no-repeat;}
.instagram:hover {display:block; width:30px; height:30px; background:url(../images/link_instagram_hover.gif) center no-repeat;}
.deviantart {display:block; width:30px; height:30px; background:url(../images/link_deviantart.gif) center no-repeat;}
.deviantart:hover {display:block; width:30px; height:30px; background:url(../images/link_deviantart_hover.gif) center no-repeat;}
.threads {display:block; width:30px; height:30px; background:url(../images/link_threads.gif) center no-repeat;}
.threads:hover {display:block; width:30px; height:30px; background:url(../images/link_threads_hover.gif) center no-repeat;}
.twitter {display:block; width:30px; height:30px; background:url(../images/link_twitter.gif) center no-repeat;}
.twitter:hover {display:block; width:30px; height:30px; background:url(../images/link_twitter_hover.gif) center no-repeat;}
.facebook{display:block; width:30px; height:30px; background:url(../images/link_facebook.gif) center no-repeat;}
.facebook:hover {display:block; width:30px; height:30px; background:url(../images/link_facebook_hover.gif) center no-repeat;}
.pinterest {display:block; width:30px; height:30px; background:url(../images/link_pinterest.gif) center no-repeat;}
.pinterest:hover {display:block; width:30px; height:30px; background:url(../images/link_pinterest_hover.gif) center no-repeat;}

/* ---------- Media Query Override: Standard Menu (Height >= 600px, Width >= 700px) */
@media only screen and (orientation: landscape) and (min-height: 600px) and (min-width: 700px) {
	body {margin:2px 0px 2px 0px; height:100vh; overflow:hidden; background:#b6a99d;}
	#page_wrapper {border:4px solid #000000;}
	#page_header {border-bottom:none;}
	#page_header .inner {height:90px; background:#ffffff; border-radius:40px 40px 0px 0px; -moz-border-radius:40px 40px 0px 0px; -webkit-border-radius:40px 40px 0px 0px;}
	#page_header .logo {top:1px; left:1px; height:80px; width:80px; background:url(../images/kookie_80.gif) top left no-repeat;}
	#page_footer .inner {border-radius:0px 0px 40px 40px; -moz-border-radius:0px 0px 40px 40px; -webkit-border-radius:0px 0px 40px 40px;}
	#page_header .links {display:block;}
	#menu_wrapper {display:block;}
	#navi_wrapper {display:none;}
	#page_content {position:relative; margin:0px 10px 0px 10px; padding:40px 0px 0px 0px; background:#faf5e6; border:2px solid #9a9a9a; border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px; height:100%; max-height:calc(100vh - 192px); z-index:300;}
	#page_content .options {position:absolute; margin:0px; padding:0px; top:0px; width:100%; height:40px; text-align:center;}
	#page_content .actions {position:absolute; right:10px; margin:0px; padding:5px 0px 0px 0px;}
	#page_content .actions ul {display:inline-block; margin:0px; padding:0px; height:30px; list-style:none; white-space:nowrap;}
	#page_content .actions ul li {display:inline-block; margin:0px; padding:0px 5px 0px 5px;}
	#page_content .title {display:inline-block; margin:5px 0px 0px 0px; padding:0px 30px 0px 30px; height:26px; line-height:26px; color:#32281e; border:2px solid #32281e; font-weight:bold; text-align:center; text-decoration:none; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;}
    #page_content .inner {position:relative; padding:5px 15px 20px 15px; max-height:calc(100vh - 260px); overflow-x:hidden; overflow-y:auto;}
	#page_footer {display:block; bottom:6px;}
	#gallery_wrapper .gbody {width:640px; padding:16px 0px 16px 0px;}
	#gallery_wrapper .sbody {width:640px; padding:16px 0px 16px 0px;}
	#gallery_wrapper .gbckact {position:absolute; top:50%; left:0px; width:70px; height:70px; margin-left:0px; margin-top:-35px; background:url(../images/mlact.gif) center no-repeat;}
	#gallery_wrapper .gbckdis {position:absolute; top:50%; left:0px; width:70px; height:70px; margin-left:0px; margin-top:-35px; background:url(../images/mldis.gif) center no-repeat;}
	#gallery_wrapper .gnxtact {position:absolute; top:50%; right:0px; width:70px; height:70px; margin-right:0px; margin-top:-35px; background:url(../images/mract.gif) center no-repeat;}
	#gallery_wrapper .gnxtdis {position:absolute; top:50%; right:0px; width:70px; height:70px; margin-right:0px; margin-top:-35px; background:url(../images/mrdis.gif) center no-repeat;}
	.form_label {display:inline; padding-right:4px;}
	.spnMobBlock {display:inline; margin:0px;}
	#rcolumn_size3 {display:grid; padding-bottom:0px; max-height:calc(100vh - 370px); width:100%; overflow-x:hidden; overflow-y:auto; grid-auto-rows: 1fr; grid-template-columns: 1fr 1fr 1fr;}
}

/* ---------- Media Query Override: Recenter Content for Large Screen (Height >= 600px, Width >= 990px) */
@media only screen and (orientation: landscape) and (min-height: 600px) and (min-width: 990px) {
	#page_wrapper {margin:auto; height:calc(100vh - 12px); width:960px;}
	#page_footer {width:960px;}
}