#wrapper {
    width:100%;
    height:100%;
}

body {
    margin:0px;
    background: #ffffff;

    font-family: 'Comic Neue', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -moz-font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";
    font-feature-settings: "kern";

}

a { color:#17A2B8; text-decoration:none; }
a:active { color:#17A2B8; text-decoration:none; }
a:visited { color:#17A2B8; text-decoration:none; }
a:hover { color:#E2A20B; }

#bannerAdContainer { width:500px; height:100px; margin:0px auto; }

.sponsorAd { color:#404040; text-decoration:none; }
.sponsorAd:active { color:#404040; text-decoration:none; }
.sponsorAd:visited { color:#404040; text-decoration:none; }
.sponsorAd:hover { color:#E2A20B; }

.sponsorAd img { border:0; }
.sponsorAd span { display:block; width:260px; }

.sponsorAd .normal { display:inline; }
.sponsorAd .small { display:none; }

h2 {
    margin:0px 20px;
    text-align:left;
}




.h3 {
    font-size:18px;
    font-weight:bold;
    line-height:22px;
    vertical-align:text-bottom;
}

.h5 {
    font-size:11px;
    line-height:20px;
    vertical-align:text-bottom;
}

.icon {
    font-family:'ElegantIcons';
    line-height:30px;
    font-size:30px;
}

.button .icon {
    line-height:16px;
    vertical-align:-45%;
}

.button .textLeft { padding-left:10px; }
.button .textRight { padding-right:10px; }

.socialButton {
    color:#17A2B8 !important;
    display:inline-block;
    padding:4px; margin:0 4px;
    border:1px solid #d0d0d0;
    border-radius:4px;
    background:#f4f4f4;
}

.socialButton:hover {
    color:#E2A20B !important;
}

.button {
    color:#17A2B8 !important;
    display:inline-block;
    padding:4px; margin:0 4px;
    border:1px solid #d0d0d0;
    border-radius:4px;
    background:#f4f4f4;

    -moz-user-select:none;
    -webkit-user-select:none;
    -o-user-select:none;
    -ms-user-select:none;
    user-select:none;

    white-space:nowrap;
}

.button:hover {
    color:#E2A20B !important;
    background:#f0f0f0;
    cursor:pointer;
}

.button.processing {
    background: #d0d0d0;
    color:#404040 !important;
    cursor:wait;
}

.button2 {
    color:#17A2B8 !important;
    display:inline-block;
    padding:4px; margin:0 4px;
    border:1px solid #d0d0d0;
    background:#f4f4f4;

    -moz-user-select:none;
    -webkit-user-select:none;
    -o-user-select:none;
    -ms-user-select:none;
    user-select:none;

    white-space:nowrap;
}

.button2:hover {
    color:#E2A20B !important;
    background:#f0f0f0;
    cursor:pointer;
}

.button2.processing {
    background: #d0d0d0;
    color:#404040 !important;
    cursor:wait;
}

.button.round {
    background:none;
    width:30px; height:30px;
    text-align:center; vertical-align:text-bottom;
    border:none;
    padding:4px;
}

.button.round:hover {
    background:#fff;
    border:1px solid #d0d0d0;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    border-bottom-right-radius:18px;
    border-bottom-left-radius:18px;
    padding:3px;
}



#notificationBar {
    display:block;
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    text-align:center;
    z-index:200;
    background:#E2A20B;
    color:#f5f5f5;
    font-weight:bold;
    font-size:16px;
}

#notificationBar .icon {
    display:none;
    float:left;
    width:36px; height:100%;
    padding:4px 5px 4px 10px;
    font-size:36px;
    line-height:100%;
}

#notificationBar .message {
    display:block;
    padding:4px 10px 4px 0px;
    font-size:16px; line-height:26px;
    margin-left:5px;
}

#notificationBar a { color:#f4f4f4; } 
#notificationBar a:visited { color:#f4f4f4; } 
#notificationBar a:active { color:#f4f4f4; } 
#notificationBar a:hover { color:#404040; } 

#banner {
    z-index:100;
    position:relative; top:0px; left:0px;
    width:auto;
    overflow:hidden;
    padding:0px 10px 0px 10px;

    -webkit-box-shadow: 0px 4px 8px #d0d0d0;
    -moz-box-shadow: 0px 4px 8px #d0d0d0;
    box-shadow: 0px 4px 8px #d0d0d0;

    background:#ffffff;

    white-space:nowrap;
}


.bottomRibbon {
    z-index:110;
    position:relative; top:0px; left:0px;
    height:5px;
    background:url('/img/ribbon.png');
}

#logo {
    display:inline-block;
    vertical-align:baseline;
    position:relative; left:10px; top:0px;
    width:200px; height:100px;
    border:none;
}

#subBanner {
    position:absolute;
    right:20px; top:2px;
    text-align:right;
    border:0px solid #000;
}

#cart {
    z-index:120;
    color:#404040;
    background:#fff;
}

#cart:hover {
    color:#E2A20B;
    cursor: pointer;
}

#navBar {
    display:inline-block;
    vertical-align: bottom;
    position:relative; left:40px; top:0px;
    margin-top:20px;
    margin-right:220px;
    white-space:normal;
}

.navGroup { display:inline-block; }

.navItem {
    font-size:1.3em;
    font-weight:bold;
    color:#606060;
    text-decoration:none;
    padding:0px 0px 2px 0px;
    margin-right:15px;
    border-bottom:3px solid #ffffff;
    white-space:nowrap;
    line-height:2em;
}

.navItem:visited { color:#606060; }
.navItem:active { color:#606060; }

.navItem.inactive { color:#d0d0d0; }

.navItem:hover {
    color:#17A2B8;
    border-bottom:3px solid #30bbd1;
}

.navItem.inactive:hover { color:#d0d0d0; }

.subNav {
    z-index:500;
    display:none;
    position:absolute;
    margin-top:0px;

    background:#ffffff;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    border:1px solid #d0d0d0;
    border-top:0px solid #30bbd1;

}


.subNav a:link {
    font-size:1.3em;
    color:#606060;
    text-decoration:none;
    padding:0px 5px;
    white-space:nowrap;
}
.subNav a:visited { color:#606060; }
.subNav a:active { color:#606060; }
.subNav a:hover { color:#17A2B8; }

.subMenu {
    display:inline-block;
    list-style-type:none;
    padding:0px;
}

.subMenu li {
    position:relative;
    padding:4px 0px;
    height:14px;
}

.subMenu li a {
    line-height:18px;

}

#spotlight {
    z-index:90;
    position:relative; top:0px; left:0px;
    width:100%; min-height:20px;
    background:#f4f4f4;
    text-align:center;
    overflow-y:hidden;
    border-bottom:1px solid #d0d0d0;

}

#content {
    z-index:90;
    position:relative; top:0px; left:0px;
    width:auto; min-height:400px;
    padding:10px 0px;
    background:#ffffff;

    -webkit-box-shadow: 0px 4px 8px #d0d0d0;
    -moz-box-shadow: 0px 4px 8px #d0d0d0;
    box-shadow: 0px 4px 8px #d0d0d0;

    text-align:center;
}

#footer {
    z-index:1;
    position:relative; top:0px; left:0px;
    margin-top:-5px;
    width:auto;
    padding:10px;
    background:#f4f4f4;
    text-align:center;
}

.mainComic { max-height:120px; border:1px solid #d0d0d0;  }

.noLink { text-decoration:none; }
.noLink:visited { text-decoration:none; }
.noLink:active { text-decoration:none; }
.noLink:hover { text-decoration:none; }

.box {
    display:inline-block;
    margin:10px;
    background:#ffffff;
    padding:8px 16px;
    border:1px solid #c4c4c4;
}

.rounded {
    border-radius:2px;
}

.itemBox {
    display:inline-block;
    position:relative;
    width:260px;
    height:240px;
    margin:10px;
    padding:10px;
    background:#f4f4f4;
    border:1px solid #d0d0d0;
}

.itemBox.sponsor {
    width:280px;
    height:240px;
    background:#d0d0d0;
    font-size:24px;
    color:#404040;
    padding:0px;
}

.itemBox.sponsor2 {
    width:120px;
    height:120px;
    background:#d0d0d0;
    font-size:12px;
    color:#404040;
    padding:0px;
}

.itemBox:hover {
    background:#ededed;
    border:1px solid #c4c4c4;
    cursor:pointer;
}

.itemBox img {
    position:absolute; top:0px; left:0px;
    max-height:200px;
}

.itemBox span {
    display:block;
    position:absolute; top:200px; left:0px;
    padding:0px 10px; font-size:1.1em;
    font-weight:bold;
}

.itemBox.sponsor span, .itemBox.sponsor2 span {
    display:block;
    position:relative; top:0px; left:0px;
    padding:0px 10px; font-size:2em;
    font-weight:bold;
}

.comicBox {
    width:280px;
    height:260px;
    position:relative;
    padding:0px;
    background:#f5f5f5;
}

.comicBox.alt {
    background:#ffffff;
}

.itemBox:hover {
    background:#ededed;
    border:1px solid #c4c4c4;
    box-shadow:0px 4px 8px #ccc;

}

.moreBox:hover {
    box-shadow:none;
}

.moreBox .coverImage:hover {
    box-shadow:0px 4px 8px #ccc;
}


.comicBox .number {
    position:absolute; top:170px; right:0px;
    padding:4px 8px;
    width:50px;
    background:#404040;
    background:rgba(60, 60, 60, 0.8);
    color:#ffffff;
    font-weight:bold;
    border-bottom-left-radius:6px;
    border-top-left-radius:6px;
}

.comicBox .number.long {
    width:80px;
}

.comicBox .author {
    position:absolute; top:176px; right:0px;
    padding:4px 8px;
    width:auto;
    background:#404040;
    color:#ffffff;
    font:14px 'Arial', sans-serf;
}

.comicBox .coverImage {
    position:absolute; top:0px; left:0px;
    width:280px;
    height:200px;
    padding:0px;
    text-align:center;
}

.comicBox .coverImage img {
    max-width:280px;
    max-height:200px;
}

.comicBox .title {
    position:absolute; top:208px; left:8px;
    width:244px; height:54px;
    padding:3px 8px;
    vertical-align:bottom;
    text-align:center;
    font-weight:bold;
    border-top:1px solid #d0d0d0;
}

.itemBox.moreBox {
    background:#ffffff;
    border:1px solid #fff;
}

.itemBox.moreBox .coverImage {
    margin-top:65px; margin-left:50px;
    width:160px;
    height:80px;
    background:#f9f9f9;
    border:1px solid #d0d0d0;
    padding:0px 10px 10px 10px;
}

.itemBox.moreBox .coverImage:hover {
    background:#ededed;
    border:1px solid #c4c4c4;
}

.comicSection {
    position:relative;
    height:289px;
    width:100%;
    overflow:hidden;

    user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    -ms-user-select:none;
    -webkit-user-select:none;

}

.comicSection .leftArrow, .comicSection .rightArrow {
    z-index:200;
    position:absolute;
    border:1px solid #d0d0d0;
    width:30px;
    height:89px;
    background:#f4f4f4;
    top:80px;
    font-size:54px;
    color:#909090;
    line-height:90px;
    text-indent:-12px;
    border-radius:2px;

    cursor:pointer;
}

.comicSection .leftArrow:hover, .comicSection .rightArrow:hover {
    cursor:pointer;
    background:#ededed;
    border:1px solid #c4c4c4;
}

.comicSection .leftArrow {
    left: 5px;
}

.comicSection .rightArrow {
    right:5px;
}

.storeBox {
    position:relative;
    width:210px;
    height:200px;
}

.storeBox:hover { cursor: default; }

.storeBox .coverImage img {
    position:relative; top:0px; left:0px;
    max-width:200px;
    max-height:120px;
}

.storeBox .title {
    position:absolute; top:135px; left:8px;
    width:200px; height:54px;
    padding:3px 8px;
    vertical-align:bottom;
    text-align:center;
}

.storeBox .bottomBar {
    position:absolute; bottom:0px; right:0px;
}

.storeBox .price {
    float:right;
    padding:6px 6px;
    background:#d0d0d0;
    color:#404040;
    font-weight:bold;
    text-align:right;
}

.storeBox .addToCart {
    float:right;
    padding:2px 4px;
    margin-right:5px;
    background:#d0d0d0;
    color:#404040;
    text-align:center;
    font-size:16px;

    -moz-user-select:none;
    -webkit-user-select:none;
    -o-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.storeBox .addToCart:hover {
    background:#404040;
    color:#ffffff;
    cursor:pointer;
}

.hr {
    height:1px;
    margin:10px 20px;
    background:#e0e0e0;

    -webkit-box-shadow: 0px 0px 8px #d0d0d0;
    -moz-box-shadow: 0px 0px 8px #d0d0d0;
    box-shadow: 0px 0px 8px #d0d0d0;
}

.footerCategory {
    display:inline-block;
    margin:10px 40px;
    vertical-align:top;
    text-align:left;
}

.footerHeading {
    display:block;
    font-weight:bold;
}

.footerLink {
    display:block;
    color:#404040;
    text-decoration:none;
}
.footerLink:visited { color:#404040; }
.footerLink:active { color:#E2A20B; }
.footerLink:hover { color:#E2A20B; }

#disclaimer {
    margin-top:30px;
    line-height:1;
}

.footerText {
    font-size:0.8em;
    margin-right:10px;
}

.copyright {
    font-family:sans;
    font-size:1.1em;
}

.comicDialog, .storeDialog {
    max-width:1000px !important;
    height:100%;
    text-align:center;
    border-radius:0px !important;
}

#comicDialogContainer{
    display:none;
    overflow-y:scroll !important;
    overflow-x:hidden;
    padding:0px;
    -webkit-overflow-scrolling:touch;
}

#comicDialogContainer img {
    max-width:100%;
}

#comicOverlay {
    display:none; position:fixed; width:100%; max-width:1000px; bottom:0px;
}

.ui-dialog-titlebar {
    z-index:100;
    position:absolute !important;
    background:none !important;
    border:0px !important;
    top:0px; left:0px; right:17px;
    padding:0px !important;
    float:right !important;
}

#comicLoader {
    display:table-cell;
    vertical-align:middle;
}

#donationDialogContainer {
    display:none;
}

#donationDialog {
    text-align:center;
    word-wrap: break-word;
}

.dark { background:#404040; color:#f4f4f4; }
.light { background:#f4f4f4; color:#E2A20B; }
.light2 { background:#ffffff; color:#E2A20B }

.dark:hover { background:#000000; color:#F4F4F4; }
.light:hover { background:#d0d0d0; color:#E2A20B; }
.light2:hover { background:#404040; color:#E2A20B }

.ui-dialog-titlebar-close {
    width:25px !important;
    height:25px !important;
}

.ui-icon-closethick {
    background:url('/img/icons/x.png') no-repeat !important;
    width:24px; height:24px;
}

#moreComicsLink { display:inline-block; }
#comicFooter { margin-bottom:65px; margin-top:15px; }

.ui-tooltip {
    font-size:0.8em;
}

.cartQty {
    width:40px;
    text-align:center;
    font-size:16px;
    border:1px solid #d0d0d0;
    border-radius:2px;
    background:#ffffff;
    padding:2px;
}

label {
    display:inline-block;
    width:210px;
    margin-right:10px;
    margin-left:10px;
    text-align:right;
    font-size:1.2em;
}
input[type=text] {
    font-size:1.1em;
    padding:4px;
    background:#ffffff;
    border:1px solid #d0d0d0;
    border-radius:2px;
}

input.error {
    border:1px solid #ba0000;
}

label.error {
    color: #ba0000;
}

.wideRow { }
.narrowRow { display:none; }

@media only screen and (min-width : 320px) and (max-width : 760px) {

    #logo { display:block; margin:auto; left:0px; top:5px; }
    #navBar { left:0px; margin:0px; text-align:center; }
    #footer { padding:10px 0px; }
    .footerCategory { margin:10px 0px; width:45%; }
    #notificationBar { width:100%; text-align:center; }

    .wideRow { display:none; }
    .narrowRow { display:table-row; }
}

@media only screen and (max-width : 400px) {
    .cartProductImg { display:none; }
    .optional { display:none; }
}

@media only screen and (max-width : 516px) {
    #bannerAdContainer { width:300px; height:80px; margin:0px auto; }
    .sponsorAd .normal { display:none; }
    .sponsorAd .small { display:inline; }
}

@media only screen and (max-width : 480px) {
    label { margin-left:0px; text-align:left; }
}