@media (max-width: 1023px){ 
    .responsiveHide {display:none;}
    .responsiveClear {clear:both;}
    .responsiveWidth {width:100% !important;}  
    .responsiveCenter {text-align:center !important; float:none !important; margin-left:auto !important; margin-right:auto !important;}       

    .leftPageAds {display:none;}
    .navBarLeftLinks {display:none;}
    .mainNavBarInner .membersNavLink {display:none;}
    .submitFontForm input, .submitFontForm select, .submitFontForm textarea {border: 1px solid #ababab; width:95% !important;}
    .submitFontForm {padding:0px;}
    .customPreviewSettings .customPreviewTextInput input {width:100%}
    .customPreviewSettings {width:100%;}
    .categoryBarInner {padding:20px;}
    .stButton {padding:5px;}
    .submitFontForm label {width:100%;}
    .letterListing {width:100%;}
    .fontPreview {height:auto; width:100%;}
    .tinynav {display: block !important; width:99%;}
    #nav, #nav2 {display: none;}
    .mainNavBarInner .navBarRightSearch {float:left !important; width: 100% !important; padding: 5px 0px 10px 0px !important; text-align: left !important;}
    .navBarRightLinks {display:none;}
    .inlinePageAds {overflow-x:hidden;}
    .rateFontText {display:none;}
    .rateFontBlock .starsOn, .rateFontBlock .starsOff {display:none;}
    .fontPreviewImageWrapper {position:relative;}
    .fontPreviewImageWrapperDefault {position:relative;}
    .detailsButton {display:none;}
    .fontPreviewImageWrapperWrapper .rightSection .downloadButton .downloadButtonElement, .fontPreviewImageWrapperDefault .rightSection .downloadButton .downloadButtonElement {margin-right:0px;}
    .toolbarContainer {min-width: 0px;}
    .fontTopCategories {display:none;}
    .pageMainContent {min-height: 0px;}
    .userCommentsForm .userCommentsIntro {width:100%}
    .userCommentsForm .formLabel {width:100%}
    .fontArchiveContents {width:100%}
    .pageDetailsLeft {width:100%; padding-right:0px;}
    .pageDetailsRight {width:100%}
    .userCommentsForm textarea {width:100%} 
    .pagingWrapper {width:100%; float:none; text-align: center;}
    .pagingWrapper .pagingLink {margin-top:5px;}
    .pagingWrapper .pagingLinkOff {margin-top:5px;}
    .pagingWrapper .pagingLinkSelected {margin-top:5px;}
    .pageErrors {width:90% !important;}
    .pageSuccess {width:90% !important;}
    .searchButton {display:inline; width:55px !important;}
    .pagingLabelWrapper {text-align:center; float:none;}
    .pagingWrapper .pagingLink, .pagingWrapper .pagingLinkOff, .pagingWrapper .pagingLinkSelected {display: inline; float:none;}
    .bodyContainer {width:100% !important; border-left: 0px !important; border-right: 0px !important;}
    .pageInnerContainer {margin: 0 10px !important;}
    .mainNavBarInner {width: 100% !important;}
    .languageDropdown {margin-right:10px !important;}
    .fontPreviewImageWrapperWrapper .rightSection .previewLicenceText, .fontPreviewImageWrapperDefault .rightSection .previewLicenceText {display:none !important;}
    .fontPreviewImageWrapperWrapper .rightSection, .fontPreviewImageWrapperDefault .rightSection {width: 1px !important;}
    .responsiveCategories .categoryLink {float:left; width:16%;}
    .pagingWrapper {text-align:center !important; float:none !important; margin-left:auto !important; margin-right:auto !important;}
    .sortFilterForm {text-align:center !important; float:none !important; margin-left:auto !important; margin-right:auto !important;}
    .pagingLabelWrapper {text-align:center !important; float:none !important; margin-left:auto !important; margin-right:auto !important;}
    .pagingWrapper .pagingLink, .pagingWrapper .pagingLinkOff, .pagingWrapper .pagingLinkSelected {float:none !important;}
    .mainHeaderAds {width: 100%;}
    .mainLogo {display:none !important;}
    .mainLogoMobile {width: 100%; display:inline-block !important; text-align:center !important; float:none !important; margin-left:auto !important; margin-right:auto !important;}
    .contentLeft h1 {text-align:center;}
    .genericPageTitle .contentLeft {float:none !important;}
    .submitFontForm {padding-left:0px !important;}
    .fontDesigner a {word-break: break-all; word-wrap: break-word;}
    .responsiveCategories {display:block !important;}   
    .fontPreviewTitle {padding: 7px;}
    .responsiveDisplay {display:block !important;}
    .navBarRightSearchWrapper {float: left !important; text-align: left; text-align: left !important; margin-left: 10px;}
    .mobileLogoAdvertAlt {display: none !important;}
    .fontDetailsBottomLeft, .fontDetailsBottomRight { width: 100% !important; display: block; margin-left: 0px !important; }
    .fontDownloadButton { margin-top: 0px !important; }
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain {
        display: inline-flex !important; 
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain .downloadButtonElement.fontDownloadButton {
        float: none !important;
        margin-top: 0 !important;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain .downloadButtonElement.fontDownloadButton.downloadButtonPaired {
        width: 102px;
        text-align: center;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain .downloadQueueButtonElement {
        border: 1px solid #000000;
        display: flex !important; 
        float: none !important;
        padding-right: 5px !important;
        padding-left: 5px !important;
        padding-top: 5px !important;
        padding-bottom: 3px !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
        background-color: #000000;
        cursor: pointer;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain .downloadQueueButtonElement svg {
        width: 16px !important;
        height: 16px !important;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadQueueButtonElement.queueIconInQueue svg path, .fontPreviewWrapper .responsiveMobileCenter .downloadQueueButtonElement.queueIconInQueue svg path {
        stroke: none !important;
        fill: #000000 !important;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadQueueButtonElement {
        padding-top: 2px;
    }
    .favoritesLinkHeader { margin-right: 8px; }
    .membersDashboardWrapper .contentLeft h1 {text-align: left;}
    .favoritesActions {
        text-align: center !important;
    }
}

@media (max-width: 540px){ 
    .responsiveFontPreviewClear {clear:both;}
    .socialTop { display: none; }
    .mainNavBarInner .navBarRightSearch { text-align: center !important; }
    .favoritesLinkHeader { display: none !important; }
}

@media (max-width: 479px){
    .responsiveMobileClear {clear:both;}
    .responsiveMobileCenter {text-align:center !important; float:none !important; margin-left:auto !important; margin-right:auto !important;}  
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton, .fontPreviewWrapper .responsiveMobileCenter form, .fontPreviewWrapper .responsiveMobileCenter .donateButton {display: inline-block !important;}
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain {
        display: inline-flex !important; 
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain .downloadButtonElement.fontDownloadButton {
        float: none !important;
        margin-top: 0 !important;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain .downloadQueueButtonElement {
        display: flex !important; 
        float: none !important;
        padding-right: 5px !important;
        padding-left: 5px !important;
        padding-top: 5px !important;
        padding-bottom: 3px !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
        background-color: #000000;
        cursor: pointer;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain .downloadQueueButtonElement svg {
        width: 16px !important;
        height: 16px !important;
    }
    .responsiveCategories .categoryLink {width:33%;}
    .mainNavBar {height:auto !important;}
}

@media (max-width: 599px){
    .responsiveMobileCenter {text-align:center !important; float:none !important; margin-left:auto !important; margin-right:auto !important; width:100% !important;}  
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton, .fontPreviewWrapper .responsiveMobileCenter form, .fontPreviewWrapper .responsiveMobileCenter .donateButton {display: inline-block !important;}
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain {
        display: inline-flex !important; 
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain .downloadButtonElement.fontDownloadButton {
        float: none !important;
        margin-top: 0 !important;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain .downloadQueueButtonElement {
        display: flex !important; 
        float: none !important;
        padding-right: 5px !important;
        padding-left: 5px !important;
        padding-top: 5px !important;
        padding-bottom: 3px !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
        background-color: #ffffff;
        cursor: pointer;
    }
    .fontPreviewWrapper .responsiveMobileCenter .downloadButton.downloadButtonMain .downloadQueueButtonElement svg {
        width: 16px !important;
        height: 16px !important;
    }
    .fontDownloadButton {text-align:center !important; float:none !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:5px;}  
    .fontDonateButton {text-align:center !important; float:none !important; margin-left:auto !important; margin-right:auto !important;}  
    .mobileLogoAdvertAlt {display: block !important;; text-align:center !important; float:none !important; margin-left:auto !important; margin-right:auto !important; margin-top: 6px;}
    .mobileLogoAdvert {display: none !important;}
    .mainLogo {text-align:center !important; float:none !important; margin-left:auto !important; margin-right:auto !important;}
}


/* site styles */
html, body
{
    margin: 0;
    padding: 0;
    /*font-family: "Lucida Grande", Helvetica, Arial, "Arial Unicode", sans-serif;*/
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #3F3F3F;
    height: 100%;
}

html { overflow-y: scroll; }

body
{
    background: #E9E9E9 url("../images/body_bg.jpg") repeat;
}

img
{
    border: none;
}

a
{
    text-decoration: none;
    color: #333;
}
a:hover
{
    text-decoration: underline;
}

.clear
{
    clear: both;
}

.pageErrors
{
    padding: 10px;
    width: 98%;
    float: left;
    color: #721c24;
    background-color: #f8d7da;
    border-color: f5c6cb;
    box-sizing: border-box;
}
.pageErrors li, .pageSuccess li
{
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}
.pageSuccess
{
    padding: 10px;
    width: 98%;
    float: left;
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

td
{
    vertical-align: top;
}

/* site specific */
.mainPageContainer
{
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    font-size: 14px;
}
.mainPageContainer.minimalPageContent .bodyBarWrapper {
    margin-top: 0px;
}
.mainPageContainer.minimalPageContent .breadcrumb-nav {
    margin-bottom: 0px;
}
.pageContainer
{
    float: left;
}
.mainPageContent
{
    float: left;
    width: 100%;
}
.toolbarContainer
{
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.pageMainContent
{
    min-height: 500px;
}
.genericPageTitle h1
{
    font-size: 16px;
}
.genericPageTitle .contentRight
{
    float: right;
}
.genericPageTitle .contentLeft
{
    float: left;
}

.pageInnerContainer
{
    margin: 35px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.pageInnerContainer .headerBar
{
    padding-top: 8px;
    padding-bottom: 8px;
}

.fontPreviewHeader
{
    width: 100%;
    clear: both;
}
.fontPreviewHeaderInner
{
    padding: 10px;
    background-color: #eeeeee;
    border: 1px solid #777;
    -webkit-border-radius: 7px 7px 7px 7px;
    -moz-border-radius: 7px 7px 7px 7px;
    border-radius: 7px 7px 7px 7px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 15px;
}

.fontPreviewHeader a
{
    color: #3F3F3F;
    font-weight: bold;
    text-decoration: none;
}
.fontPreviewHeader a:hover
{
    text-decoration: underline;
}

.fontPreviewImageWrapper
{
    height: 92px;
    clear: both;
    cursor: pointer;
    display: table-cell;
    width: 100%;
}
.fontPreviewImageWrapperWrapper
{
    /*border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;*/
    padding-top: 22px;
    padding-left: 0px;
    padding-bottom: 22px;
    display: table;
}

.fontPreviewImageWrapperDefault
{
    height: 92px;
    clear: both;
    cursor: pointer;
    display: table-cell;
    width: 100%;
}
.fontPreviewImageWrapperWrapper .rightSection, .fontPreviewImageWrapperDefault .rightSection
{
    float: right;
    width: 174px;
    cursor: default;
    height:     112%;
    background-color: #ffffff;
    top: -10px;
    position: relative;
    display: table-cell;
    width: 174px;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadButton, .rightSection .donateButton, .fontPreviewImageWrapperDefault .rightSection .downloadButton, .fontPreviewImageWrapperWrapper .rightSection .detailsButton, .fontPreviewImageWrapperDefault .rightSection .detailsButton
{
    float: right;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadButton .downloadButtonElement, .fontPreviewImageWrapperDefault .rightSection .downloadButton .downloadButtonElement
{
    border: 1px solid #000000;
    padding-right: 11px;
    padding-left: 11px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bold;
    background-color: #000000;
    color: #fff;
    margin-top: 30px;
    margin-right: 0px;
    cursor: pointer;
    font-size: 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.rightSection .donateButton, .rightSection .downloadButtonMain
{
    width: 141px;
    text-align: center;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadButtonElement.downloadButtonPaired {
    font-size: 14px;
    width: 102px;
    padding-left: 2px;
    padding-right: 2px;
}
.rightSection .donateButton .donateButtonElement, .rightSection .buyButton .buyCommercialElement
{
    border: 1px solid #686868;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: normal;
    background-color: #ffffff;
    margin-top: 5px;
    margin-right: 0px;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.rightSection .donateButton .donateButtonElement a, .rightSection .buyButton .buyCommercialElement a
{
    text-decoration: none;
    color: #151515;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadButtonQueueSelected, .fontPreviewImageWrapperDefault .rightSection .downloadButtonQueueSelected
{
    border: 1px solid #ccc;
    padding-right: 11px;
    padding-left: 11px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-weight: bold;
    background-color: #ccc;
    color: #fff;
    margin-top: 30px;
    margin-right: 5px;
    cursor: pointer;
}
.fontPreviewImageWrapperWrapper .rightSection .detailsButton .detailsButtonElement, .fontPreviewImageWrapperDefault .rightSection .detailsButton .detailsButtonElement
{
    border: 1px solid #777;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    background-color: #777;
    color: #fff;
    margin-top: 30px;
    margin-right: 5px;
    cursor: pointer;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadButton .downloadButtonElement:hover, .fontPreviewImageWrapperDefault .rightSection .downloadButton .downloadButtonElement:hover
{
    background-color: #ffffff;
    border: 1px solid #333;
    color: #fff;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadButton .downloadButtonElement:hover a, .fontPreviewImageWrapperDefault .rightSection .downloadButton .downloadButtonElement:hover a
{
    color: #3F3F3F;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadButton .downloadButtonElement a, .fontPreviewImageWrapperDefault .rightSection .downloadButton .downloadButtonElement a
{
    color: #fff;
    text-decoration: none;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadButton .downloadButtonQueueSelected:hover, .fontPreviewImageWrapperDefault .rightSection .downloadButton .downloadButtonQueueSelected:hover
{
    background-color: #333;
    border: 1px solid #333;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadButton .downloadButtonQueueSelected a, .fontPreviewImageWrapperDefault .rightSection .downloadButton .downloadButtonQueueSelected a
{
    color: #fff;
    text-decoration: none;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadQueueButtonElement, .fontPreviewImageWrapperDefault .rightSection .downloadQueueButtonElement
{
    border: 1px solid #000000;
    padding-right: 5px;
    padding-left: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bold;
    background-color: #000000;
    color: #000;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadQueueButtonElement.queueIconInQueue, .fontPreviewImageWrapperDefault .rightSection .downloadQueueButtonElement.queueIconInQueue {
    background-color: #FFD700;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadQueueButtonElement.queueIconInQueue svg path, .fontPreviewImageWrapperDefault .rightSection .downloadQueueButtonElement.queueIconInQueue svg path {
    stroke: none;
    fill: #000000;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadQueueButtonElement a, .fontPreviewImageWrapperDefault .rightSection .downloadQueueButtonElement a
{
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadQueueButtonElement:hover, .fontPreviewImageWrapperDefault .rightSection .downloadQueueButtonElement:hover
{
    background-color: #FFD700;
    border-color: #666;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadQueueButtonElement:hover a, .fontPreviewImageWrapperDefault .rightSection .downloadQueueButtonElement:hover a
{
    color: #666;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadQueueButtonElement:hover svg path, .fontPreviewImageWrapperDefault .rightSection .downloadQueueButtonElement:hover svg path
{
    stroke: none;
    fill: #000000;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadQueueButtonElement.queueIconInQueue:hover
{
    background-color: #FFD700;
}
.fontPreviewImageWrapperWrapper .rightSection .downloadQueueButtonElement.queueIconInQueue:hover svg path, .fontPreviewImageWrapperDefault .rightSection .downloadQueueButtonElement.queueIconInQueue:hover svg path
{
    stroke: none;
    fill: #000000;
}
.fontPreviewImageWrapperWrapper .rightSection .detailsButton .detailsButtonElement:hover, .fontPreviewImageWrapperDefault .rightSection .detailsButton .detailsButtonElement:hover
{
    background-color: #333;
    border: 1px solid #333;
}
.fontPreviewImageWrapperWrapper .rightSection .detailsButton .detailsButtonElement a, .fontPreviewImageWrapperDefault .rightSection .detailsButton .detailsButtonElement a
{
    color: #fff;
    text-decoration: none;
}
.fontPreviewWrapper
{
    margin-bottom: 3px;
}
.fontPreviewTitle
{
    float: left;
}

.rateFontBlock
{
    float: right;
    margin-right: 3px;
    width: 90px;
}
.rateFontText
{
    float: right;
    width: 55px;
    margin-right: 102px;
    font-size: 13px;
    padding-top: 2px;
    text-align: right;
    background-color: #fff;
    height: 20px;
    overflow: hidden;
}
.rateFontBlock .starsOn, .rateFontBlock .starsOff
{
    width: 90px;
    height: 17px;
    position: absolute;
}
.rateFontBlock .starsOn
{
    z-index: 11;
    background: url("../images/stars_on.png") no-repeat bottom left;
}
.rateFontBlock .starsOff
{
    z-index: 10;
    background: url("../images/stars_off.png") no-repeat bottom right;
}

.categoryBar
{
    width: 100%;
    font-size: 14px;
    margin-bottom: 20px;
}

.fb_iframe_widget iframe
{
    z-index: 9;
}

.categoryBarInner
{
    border: 1px solid #777;
    padding: 12px;
    background-color: #eee;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.letterListing
{
    padding-bottom: 12px;
}

.letterListing .atozTopTitle
{
    float: left;
    font-weight: bold;
    padding: 4px 4px 2px 9px;
}

.categoryLink
{
    width: 100%;
}
.letterLink
{
    text-align: center;
}
.categoryLink, .letterLink
{
    float: left;
}
.categoryLink a
{
    padding: 4px 4px;
    display: block;
}
.letterLink a
{
    padding: 4px 8px;
    display: inline-block;
    min-width: 9px;
}
.categoryLink:hover, .letterLink:hover
{
    cursor: pointer;
    background-color: #ccc;
}
.categoryLink:hover a, .letterLink:hover a
{
    color: #fff;
    text-decoration: underline;
}
.categoryLink a, .letterLink a
{
    text-decoration: none;
}
.categoryLink a:hover, .letterLink a:hover
{
    text-decoration: underline;
}

.settingsBar
{
    width: 100%;
    background-color: #eee;
    font-size: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}

.mainNavBar
{
    width: 100%;
    font-size: 14px;
    height: 43px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    background-color: #EEEEEE;
}
.mainNavBar a
{
    color: #3F3F3F;
    text-decoration: none;
    font-size: 15px;
}
.mainNavBar a:hover
{
    text-decoration: underline;
}
.mainNavBar .break {
    font-size: 14px;
    color: #ccc;
}
.mainNavBarInner
{
    margin-left: auto;
    margin-right: auto;
    width: 1008px;
}
.mainNavBarInner .navBarLeftLinks
{
    float: left;
    padding: 10px;
    padding-top: 13px;
    padding-left: 18px;
    padding-right: 18px;
    position: absolute;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 550px;
}

.toolbarContainerInner
{
    margin-bottom: 20px;
}

/* paging */
.pagingWrapper
{
    float: right;
    padding-top: 6px;
    padding-bottom: 0px;
}
.pagingWrapper .pagingLink, .pagingWrapper .pagingLinkOff, .pagingWrapper .pagingLinkSelected
{
    float: left;
    padding: 7px 0px;
    margin-right: 5px;
    width: 35px;
    text-align: center;
    display: inline-block;
}
.pagingWrapper div {
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
}

.pagingWrapper .pagingLink
{
    border: 1px solid #000000;
    background-color: #000000;
    color: #fff;
    cursor: pointer;
    display: inline-block;
}
.pagingWrapper .pagingLink:hover
{
    background-color: #fff;
}
.pagingWrapper .pagingLinkOff
{
    border: 1px solid #ddd;
    background-color: #ddd;
    color: #fff;
}
.pagingWrapper .pagingLinkSelected
{
    border: 1px solid #777;
    background-color: #fff !important;
}
.pagingWrapper .pagingLinkSelected a
{
    text-decoration: none;
    font-weight: bold;
    color: #3F3F3F;
}
.pagingWrapper .pagingLink a
{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
.pagingWrapper .pagingLink:hover a
{
    color: #3F3F3F;
}
.pagingLabelWrapper
{
    float: left;
    padding-top: 10px;
    padding-right: 12px;
}

.pagingLabelWrapper h2
{
    font-size: 15px;
    font-weight: bold;
    margin: 0px;
}

.footer
{
    /* background-color: #fff; */
    color: #3F3F3F;
    text-align: center;
    padding: 16px;
    /* border-top: 1px solid #c6c6c6; */
}
.footer a
{
    color: #3F3F3F;
    text-decoration: underline;
}
.footer a:hover
{
    text-decoration: none;
}

.pageDetailsLeft
{
    width: 100%;
    display: block;
}
.pageDetailsRight
{
    width: 100%;
    display: block;
}

.characterMap
{
    float: left;
    padding-top: 8px;
    width: 100%;
}

.fontArchiveContents
{
    float: left;
    width: 100%;
    padding-top: 8px;
}
.fontArchiveContents th, .fontArchiveContents td
{
    padding: 7px;
    border-bottom: 1px solid #777;
    border-right: 1px solid #777;
    word-break: break-all;
    word-wrap: break-word;
}
.fontArchiveContents th
{
    background-color: #eeeeee;
    color: #666;
    text-align: left;
}
.fontArchiveContents tr:hover
{
    background-color: #efefef;
}
.fontArchiveContents a
{
    text-decoration: none;
}
.fontArchiveContents a:hover
{
    text-decoration: underline;
}

.fontArchiveContents tr:first-child th:first-child {
    border-top-left-radius: 7px;
}
.fontArchiveContents tr:first-child th {
    border-top: 1px solid #777;
}
.fontArchiveContents tr:first-child th:last-child {
    border-top-right-radius: 7px;
}
.fontArchiveContents tr td:first-child, .fontArchiveContents tr th:first-child {
    border-left: 1px solid #777;
}
.fontArchiveContents tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}
.fontArchiveContents tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}

.userCommentsForm
{
    padding-top: 14px;
}
.userCommentsForm .formLabel
{
    width: 100px;
    float: left;
}
.userCommentsForm  textarea
{
    width: 400px;
    height: 50px;
}
.userCommentsForm  label
{
    padding-left: 10px;
}
.userCommentsForm  input
{
    width: 250px;
}
.userCommentsForm  .submitButton
{
    width: 130px;
}
.userCommentsForm  .userCommentsIntro
{
    float: left;
    width: 541px;
    padding-bottom: 20px;
}

.userCommentsList
{
    padding-top: 8px;
}
.userCommentsList .commentRight
{
    float: left;
    display: block;
}
.userCommentsList .commentLeft
{
    float: left;
    width: 40px;
    overflow: hidden;
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #bbb;
}
.userCommentsList .commentHead
{
    color: #bbb;
}
.userCommentsList .commentsWrapper
{
    border-bottom: 1px solid #bbb;
    padding-top: 10px;
    padding-bottom: 10px;
}
.userCommentsList .commentFirst
{
    border-top: 1px solid #bbb;
}
.userCommentsList .commentBody
{
    width: 500px;
}

/* ads */
.mainHeaderAds
{
    float: right;
    text-align: right;
    padding-top: 3px;
}
.leftPageAds
{
    float: left;
    padding-right: 20px;
}
.rightPageAds
{
    float: left;
    padding-left: 10px;
}
.footerPageAds
{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-right: 35px;
    padding-left: 35px;
}

/* custom preview area */
.customPreviewSettings
{
    font-size: 14px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    width: 650px;
}
.customPreviewSettings .customPreviewTextLabel, .customPreviewSettings .customPreviewSizeSelect, .customPreviewSettings .customPreviewTextColourLabel, .customPreviewSettings .customPreviewTextInput, .customPreviewSettings .customPreviewTextColourPicker, .customPreviewSettings .customPreviewTextSubmit
{
    float: left;
}
.customPreviewSettings .customPreviewTextLabel, .customPreviewSettings .customPreviewTextColourLabel
{
    padding-top: 2px;
    padding-right: 5px;
}
.customPreviewSettings .customPreviewTextInput, .customPreviewSettings .customPreviewSizeSelect
{
    padding-right: 16px;
}
.customPreviewSettings .colourPickerBox
{
    margin-right: 14px;
}
.customPreviewSettings .customPreviewTextInput input
{
    width: 120px;
}
.customPreviewSettings .customPreviewSizeSelect select
{
    padding: 2px;
}

/* submit font form */
.submitFontForm
{
    padding-top: 16px;
}
.submitFontForm label
{
    float: left;
    width: 200px;
    padding-top: 12px;
}
.submitFontForm div
{
    clear: right;
    padding: 5px;
}
input, select, textarea
{
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box; 
    box-sizing:content-box;
}

.submitFontForm input, .submitFontForm select, .submitFontForm textarea
{
    max-width: 400px;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}
.submitFontForm textarea
{
    height: 100px;
}
.submitFontForm .submitButton, .fontSubmitTagsMain .submitButton
{
    width: auto;
    background-color: #000000;
    margin-bottom: .5rem;
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    font-weight: 700;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
    line-height: 1.125rem;
    padding: .7rem 1rem;
    margin: 0;
    height: auto;
    border: 1px solid transparent;
    vertical-align: middle;
    -webkit-appearance: none;
}

.fontSubmitTagsMain .submitButton {
    padding: .6rem 0.8rem;
    font-size: 12px;
}

/* popup containers (yui) */
.yui-overlay,.yui-panel-container{visibility:hidden;position:absolute;z-index:2;}.yui-panel{position:relative;}.yui-panel-container form{margin:0;}.mask{z-index:1;display:none;position:absolute;top:0;left:0;right:0;bottom:0;}.mask.block-scrollbars{overflow:auto;}.masked select,.drag select,.hide-select select{_visibility:hidden;}.yui-panel-container select{_visibility:inherit;}.hide-scrollbars,.hide-scrollbars *{overflow:hidden;}.hide-scrollbars select{display:none;}.show-scrollbars{overflow:auto;}.yui-panel-container.show-scrollbars,.yui-tt.show-scrollbars{overflow:visible;}.yui-panel-container.show-scrollbars .underlay,.yui-tt.show-scrollbars .yui-tt-shadow{overflow:auto;}.yui-panel-container.shadow .underlay.yui-force-redraw{padding-bottom:1px;}.yui-effect-fade .underlay,.yui-effect-fade .yui-tt-shadow{display:none;}.yui-tt-shadow{position:absolute;}.yui-override-padding{padding:0!important;}.yui-panel-container .container-close{overflow:hidden;text-indent:-10000em;text-decoration:none;}.yui-overlay.yui-force-redraw,.yui-panel-container.yui-force-redraw{margin-bottom:1px;} .mask{background-color:#000;opacity:.35;filter:alpha(opacity=35);}.popupContainer .yui-panel-container{padding:0 1px;*padding:2px;}.popupContainer .yui-panel{position:relative;left:0;top:0;border-style:solid;border-width:1px 0;border-color:#808080;z-index:1;*border-width:1px;*zoom:1;_zoom:normal;}.popupContainer .yui-panel .hd,.popupContainer .yui-panel .bd,.popupContainer .yui-panel .ft{border-style:solid;border-width:0 1px;border-color:#808080;margin:0 -1px;*margin:0;*border:0;}.popupContainer .yui-panel .hd{border-bottom:solid 1px #ccc;}.popupContainer .yui-panel .bd,.popupContainer .yui-panel .ft{background-color:#F2F2F2;}.popupContainer .yui-panel .hd{padding:0 10px;font-size:93%;line-height:2;*line-height:1.9;font-weight:bold;color:#000;background:url(http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/sprite.png) repeat-x 0 -200px;}.popupContainer .yui-panel .bd{padding:10px;}.popupContainer .yui-panel .ft{border-top:solid 1px #808080;padding:5px 10px;font-size:77%;}.popupContainer .container-close{position:absolute;top:5px;right:6px;width:25px;height:15px;background:url(http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/sprite.png) no-repeat 0 -300px;cursor:pointer;}.popupContainer .yui-panel-container .underlay{right:-1px;left:-1px;}.popupContainer .yui-panel-container.matte{padding:9px 10px;background-color:#fff;}.popupContainer .yui-panel-container.shadow{_padding:2px 4px 0 2px;}.popupContainer .yui-panel-container.shadow .underlay{position:absolute;top:2px;left:-3px;right:-3px;bottom:-3px;*top:4px;*left:-1px;*right:-1px;*bottom:-1px;_top:0;_left:0;_right:0;_bottom:0;_margin-top:3px;_margin-left:-1px;background-color:#000;opacity:.12;filter:alpha(opacity=12);}.popupContainer .yui-dialog .ft{border-top:none;padding:0 10px 10px 10px;font-size:100%;}.popupContainer .yui-dialog .ft .button-group{display:block;text-align:right;}.popupContainer .yui-dialog .ft button.default{font-weight:bold;}.popupContainer .yui-dialog .ft span.default{border-color:#304369;background-position:0 -1400px;}.popupContainer .yui-dialog .ft span.default .first-child{border-color:#304369;}.popupContainer .yui-dialog .ft span.default button{color:#fff;}.popupContainer .yui-dialog .ft span.yui-button-disabled{background-position:0 -1500px;border-color:#ccc;}.popupContainer .yui-dialog .ft span.yui-button-disabled .first-child{border-color:#ccc;}.popupContainer .yui-dialog .ft span.yui-button-disabled button{color:#a6a6a6;}.popupContainer .yui-simple-dialog .bd .yui-icon{background:url(http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/sprite.png) no-repeat 0 0;width:16px;height:16px;margin-right:10px;float:left;}.popupContainer .yui-simple-dialog .bd span.blckicon{background-position:0 -1100px;}.popupContainer .yui-simple-dialog .bd span.alrticon{background-position:0 -1050px;}.popupContainer .yui-simple-dialog .bd span.hlpicon{background-position:0 -1150px;}.popupContainer .yui-simple-dialog .bd span.infoicon{background-position:0 -1200px;}.popupContainer .yui-simple-dialog .bd span.warnicon{background-position:0 -1900px;}.popupContainer .yui-simple-dialog .bd span.tipicon{background-position:0 -1250px;}.popupContainer .yui-tt .bd{position:relative;top:0;left:0;z-index:1;color:#000;padding:2px 5px;border-color:#D4C237 #A6982B #A6982B #A6982B;border-width:1px;border-style:solid;background-color:#FFEE69;}.popupContainer .yui-tt.show-scrollbars .bd{overflow:auto;}.popupContainer .yui-tt-shadow{top:2px;right:-3px;left:-3px;bottom:-3px;background-color:#000;}.popupContainer .yui-tt-shadow-visible{opacity:.12;filter:alpha(opacity=12);}

.popupContainer .yui-panel .bd li
{
    padding-bottom: 10px;
}

.popupContainer
{
    display: none;
}

/* v1.2 */
.fontTopCategories
{
    float: right;
    text-align: right;
    /*padding-right: 14px;*/
    color:  #3F3F3F;
}
.fontTopCategories a
{
    color:  #3F3F3F;
    text-decoration: none;
}
.fontTopCategories a:hover
{
    color:  #3F3F3F;
    text-decoration: underline;
}
.fontTotalDownloads
{
    float: right;
    text-align: right;
}
.inlinePageAds
{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 0;
}

div#demoBanner
{ 
    background-color: #333333; 
    width: 100%; 
    text-align: center;
    padding: 7px; 
    font-weight: bold;
    color: #ffffff;
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}

div#demoBanner span
{
    cursor: pointer;
}

div#demoBanner a
{
    color: #ffffff;
}

div#demoBanner:hover
{
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

/* V2.0 */
.fontDesigner
{
    padding-bottom: 14px;
}

.fontDesigner td
{
    border-bottom: 1px solid #777;
    border-right: 1px solid #777;
    padding: 7px;
}

.fontDesigner td:first-child
{
    background-color: #eeeeee;
}

.fontDesigner tr:first-child td:first-child {
    border-top-left-radius: 7px;
}
.fontDesigner tr:first-child td {
    border-top: 1px solid #777;
}
.fontDesigner tr:first-child td:last-child {
    border-top-right-radius: 7px;
}
.fontDesigner tr td:first-child {
    border-left: 1px solid #777;
}
.fontDesigner tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}
.fontDesigner tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}

.pageDetailsRight
{
    padding-top: 8px;
    color: #222222;
}

.sortFilterForm
{
    padding: 0px 0px 16px 0px;
}

.sortFilterForm label
{
    display: block;
    font-weight: bold;
}

.sortFilterForm .elementWrapper
{
    display: inline-block;
    padding-right: 8px;
}

.sortFilterForm #customPreviewText
{
    width: 180px;
}

.sortFilterForm input[type=text], .sortFilterForm select {
    padding: 5px;
    height: 29px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.navBarRightSearchWrapper
{
    width: 234px;
    display: inline;
    vertical-align: top;
    float: right;
    text-align: right;
    overflow: hidden;
}

.navBarRightSearch form
{
    display: inline-block;
    background-color: #FFF;
    padding: 0px 8px 0px;
    line-height: 24px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid rgb(169, 169, 169);
    margin-top: 2px;
}

.navBarRightSearch input[type=text]
{
    width: 174px;
    padding: 6px 8px 5px 2px;
    border: none;
    background-color: transparent;
    vertical-align: top;
}

input:focus, select:focus, textarea:focus {outline:0;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

.navBarRightSearch input[type=submit]
{
    background-color: #000000;
    border: 1px solid rgb(169, 169, 169);
    cursor: pointer;
    font-weight: bold;
    padding: 1px 4px 1px 4px;
    text-align: center;
    color: #fff;
    vertical-align: top;
    height: 33px;
    -webkit-border-radius: 0px 4px 4px 0px;
    -moz-border-radius: 0px 4px 4px 0px;
    border-radius: 0px 4px 4px 0px;
    padding: 8px;
    font-size: 14px;
}

.navBarRightSearch input[type=image]
{
    position: relative;
    bottom: 0px;
    right: -5px;
    width: 16px;
    height: 16px;
}

.navBarRightSearch input[type=submit]:hover {
    background-color: #ffffff;
    color: #3F3F3F;
}

.mainNavBarInner .navBarRightSearch
{
    float: right;
    padding: 5px 18px 0px 18px;
}

.mainNavBarInner .navBarRightSearch form
{
    color: #3F3F3F;
    font-weight: bold;
    height: 25px;
}

.footerSocial
{
    text-align: center;
    clear: both;
    padding-bottom: 12px;
}

.socialTop
{
    float: right;
    padding-right: 10px;
    margin-top: 4px;
}

.socialTop > div {
    display: inline-block;
    vertical-align: top;
}

.searchCommercialForm
{
    display: inline;
    margin-left: 4px;
}

.searchCommercialForm input
{
    width: 260px;
}

.searchCommercialForm input[type=submit]
{
    width: 80px;
}

.leftBarContentWrapper
{
    width: 160px;
    padding-top: 16px;
    padding-bottom: 5px;
    font-size: 11px;
}

.leftBarContentWrapper .leftBarContent
{
    background-color: #efefef;
    padding: 7px;
}

/*
.leftBarContentWrapper .leftBarContent .statsTitle
{
    border: solid 1px #ccc;
    background-color: #dddddd;
    padding: 5px;
}

.leftBarContentWrapper .leftBarContent .statsMain table
{
    border-collapse: collapse;
    border-right: solid 1px #ccc;
    border-left: solid 1px #ccc;
}

.leftBarContentWrapper .leftBarContent .statsMain table td
{
    padding: 5px;
    border-bottom: solid 1px #ccc;
}

.leftBarContentWrapper .leftBarContent .stat
{
    font-weight: bold;
    text-align: right;
}
*/

.keywordCloudWrapper
{
    text-align: center;
    padding-top: 8px;
    padding-bottom: 16px;
    width:100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.keywordCloudWrapper .keywordCloud .keyword
{
    margin-right: 6px;
    display: inline-block;
}

.keywordCloudWrapper .keywordCloud .keyword a
{
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    padding: 3px 4px;
    text-decoration: none;
    color: #444;
    line-height: 2.4em;
}

.keywordCloudWrapper .keywordCloud .keyword:last-child
{
    margin-right: 0px;
}

.keywordCloudWrapper .keywordCloud .keyword a:hover
{
    border: 1px solid #aaa;
    color: #3F3F3F;
}

.keywordCloudWrapper .keywordCloud .topSearches
{
    margin-right: 8px;
    display: inline;
    font-weight: bold;
}

.leftSectionPlaceHolder
{
    width: 173px;
    display: block;
}

.headerPaging .pagingWrapper, .headerPaging .pagingLabelWrapper
{
    padding-top: 0px;
    padding-bottom: 8px;
}

.pagingWrapper .pagingLinkLast
{
    margin-right: 0px;
}

.categoryWrapper
{
    border-collapse: collapse;
    padding: 0px;
    width: 100%;
}
.categoryWrapper .firstCell
{
    width: 137px;
}

.designerBrowseWrapper .letterLink
{
    font-size: 17px;
    margin-bottom: 8px;
    background-color: #000000;
    color: #fff;
    margin-right: 3px;
    padding: 4px 1px;
    border: 1px solid #000000;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
}

.designerBrowseWrapper .letterLink:hover
{
    background-color: #fff;
}

.designerBrowseWrapper .letterLink a
{
    color: #fff;
    font-weight: bold;
}

.designerBrowseWrapper .letterLink:hover a
{
    color: #3F3F3F;
    text-decoration: none;
}

.designerBrowseWrapper .letterSelected
{
    border: 1px solid #777;
    background-color: #fff;
}

.designerBrowseWrapper .letterSelected a
{
    color: #3F3F3F;
    font-weight: bold;
}

.mainLogo, .mainLogoMobile
{
    float: left;
    margin-top: 6px;
    margin-left: 1px;
}

.mainLogo.mainLogoPremium {
    width: 100%;
    text-align: center !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 3px;
}

.mainLogoMobile {
    display:none;
}

.footerAtoZ
{
    text-align: center;
    clear: both;
    padding-bottom: 12px;
    margin-top: 14px;
}

.footerAtoZ .atozFooterTitle
{
    font-weight: bold;
}

.footerAtoZ a
{
    text-decoration: none;
}

.footerAtoZ a:hover
{
    text-decoration: underline;
}

.homeBottomTextInner
{
    border: 1px solid #000000;
    padding: 12px;
    background-color: #eee;
}

.homeBottomTextInner p
{
    margin-top: 0px;
}

.homeBottomTextInner p:last-child
{
    margin-bottom: 0px;
}

.homePageFooterPaging
{
    padding-top: 5px;
}

.homePageFooterPaging .pagingWrapper
{
    padding-top: 0px;
}

.homePageFooterPaging .pagingLabelWrapper
{
    padding-top: 4px;
}

.categoryWrapper .socialButton
{
    float: left;
    display: block;
}

.socialButton a, .socialButton a:hover {
    text-decoration: none;
    margin-right: 2px;
}
.socialButton img {
    width: 24px;
    height: 24px;
}

.designerAdvertCode
{
    font-size: 11px;
    color: #333;
    text-align: center;
    display: block;
    margin-top: -2px;
}

.previewLicenceText
{
    float: right;
    padding-right: 0px;
    color: #575739;
    text-align: right;
    width: 170px;
}

.bodyContainer
{
    width: 1040px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    border-left: 1px solid #C6C6C6;
    border-right: 1px solid #C6C6C6;
    min-height: calc(100vh - 45px);
}

.fontListingList
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.fontListingList li
{
    margin-bottom: 36px;
}

.fontListingList li:last-child
{
    margin-bottom: 0px;
}

.link-selected
{
    text-decoration: none;
}

.headerMultiLanguageSwitcherWrapper
{
    display: inline-block;
    margin-right: 9px;
    vertical-align: top;
    margin-top: 2px;
}

.headerMultiLanguageSwitcherWrapper .headerMultiLanguageSwitcher a
{
    font-weight: normal;
    font-size: 12px;
    color: #09090a;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    vertical-align: middle;
    display: inline-block;
    text-decoration: none;
    padding: 5px 2px;
}

.headerMultiLanguageSwitcherWrapper .headerMultiLanguageSwitcher a:hover, .headerMultiLanguageSwitcherWrapper .headerMultiLanguageSwitcher .flagSelected
{
    color: #09090a;
    text-decoration: none;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.headerMultiLanguageSwitcherWrapper .headerMultiLanguageSwitcher img
{
    margin-right: 3px;
    margin-left: 7px;
    display: inline;
    vertical-align: middle;
}

.headerMultiLanguageSwitcherWrapper .headerMultiLanguageSwitcher span
{
    vertical-align: middle;
}


.languageDropdown
{
    display: block;
    width: 52px;
    float: right;
    font-size: 11px;
    margin-left: 3px;
}

.languageDropdown .content
{
    position: relative;
    width: 100%;
}

.languageDropdown .topNode
{
    color: #888;
    padding: 0px 6px 1px 6px;
    line-height: 22px;
    cursor: default;
    margin-bottom: 0px;
    cursor: pointer;
    text-align: center;
    margin-top: -1px;
}

.languageDropdown .topNode img, .languageDropdown .menu img
{
    margin-right: 4px;
    vertical-align: middle;
}

.languageDropdown .topNode span, .languageDropdown .menu span
{
    vertical-align: middle;
    margin-top: 1px;
    display: inline-block;
}

.languageDropdown .topNode:hover
{
    background: #f9f9f9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.languageDropdown .menu {
    display: none;
    position: absolute;
    z-index: 9999999;
    right: 0;
    margin-top: 1px;
}

.languageDropdown .menu a
{
    display: block;
    background: #f9f9f9;
    width: 50px;
    padding: 0 10px 0 10px;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.4);
    line-height: 30px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    text-align: center;
}


.languageDropdown .menu a:hover { color: #555; background-color: #ffffff; }
.languageDropdown .arrow
{
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 9px solid #f9f9f9;
    margin-left: 27px;
}

.languageDropdown .flagSelected
{
    display: none !important;
}

.responsiveCategories {
    display:none;
}

.buttonsRight {
    float:right;
    width: 265px;
    text-align: right;
}

.fontDownloadButton {
    background-color: #000000;
    border: 1px solid #000000;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin-right: 0;
    padding: 6px 11px;
    width: 80px;
    float:right;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.fontDownloadButton a {
    color: #fff;
}

.fontDonateButton {
    background-color: #ffffff;
    margin-right:5px;
    float:right;
    border: 1px solid #686868;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    padding:6px 5px;
    text-align: center;
    width: 140px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.responsiveDisplay {
    display:none;
}

.tinynav { 
    display: none;
}

.mobileLogoAdvertAlt
{
    display: none;
}

.fontListingList li:after
{
    clear: both;
}

.mainPageContainer
{
    display: inline-block;
}
.pageMainContent
{
    width: 100%;
}

.mainLayoutTable
{
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
}

.mainLayoutTable td
{
    vertical-align: top;
    display: table-cell;
}

.mainLayoutTable .cell1
{
    width: 100%;
}

.mainLayoutTable .cell2
{
    padding-left: 15px;
}

.bodyBarWrapper
{
    margin-top: 10px;
}

@media screen and (max-width: 800px) {
    .mainLayoutTable .cell2
    {
        width: 0px;
        display: none;
    }
}


#cookie-bar {background:#eee; height:auto; line-height:24px; color:#333; text-align:center; padding:5px 0; border-top: 1px solid #000000; font-weight: bold;}
#cookie-bar.fixed {position:fixed; top:0; left:0; width:100%;}
#cookie-bar.fixed.bottom {bottom:0; top:auto;}
#cookie-bar p {margin:0; padding:0;}
#cookie-bar a {color:#ffffff; display:inline-block; border-radius:0px; text-decoration:none; padding:0px 11px; margin-left:8px;}
#cookie-bar .cb-enable {background: #000; border: 1px solid #000;}
#cookie-bar .cb-enable:hover {background:#333;}
#cookie-bar .cb-disable {background:#333;}
#cookie-bar .cb-disable:hover {background:#444;}
#cookie-bar .cb-policy {background:#fff; border: 1px solid #686868; color: #151515;}

#footer-share-buttons img, #main-share-buttons img, #header-share-buttons img {
    padding: 1px;
    border: 0;
    box-shadow: 0;
    display: inline;
}

#main-share-buttons img {
    width: 35px;
    padding: 1px;
}

#footer-share-buttons img {
    width: 35px;
    padding: 1px;
}

#header-share-buttons img {
    width: 16px;
    padding: 0px;
}

#header-share-buttons {
    text-align: center;
    margin-top: 1px;
}

.submitFontForm .g-recaptcha, .submitFontForm .g-recaptcha div {
    padding: 0px;
}

.submitFontForm .g-recaptcha {
    margin-top: 2px;
}

.socialButton .twitter #widget {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    font: normal normal normal 11px/18px 'Helvetica Neue',Arial,sans-serif;
}

.socialButton .twitter #widget .btn {
    position: relative;
    height: 20px;
    box-sizing: border-box;
    padding: 1px 8px 1px 6px;
    background-color: #1b95e0;
    color: #fff;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
}

.socialButton .twitter #widget .btn-o {
    max-width: 100%;
}

.socialButton .twitter #widget .btn:active, .socialButton .twitter #widget .btn:focus, .socialButton .twitter #widget .btn:hover {
    background-color: #0c7abf;
}

.socialButton .twitter #widget .btn i {
    position: relative;
    top: 2px;
    display: inline-block;
    width: 14px;
    height: 14px;
    font-style: italic;
    margin-right: 3px;
    color: #fff;
    background: transparent 0 0 no-repeat;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
}

.socialButton .twitter #widget #count, .socialButton .twitter #widget .btn, .socialButton .twitter #widget .btn .label, .socialButton .twitter #widget .btn-o, .socialButton .twitter #widget .count-o {
    display: inline-block;
    vertical-align: top;
    zoom: 1;
}

.socialButton .twitter #widget a {
    outline: 0;
    text-decoration: none;
}

.socialButton .twitter #widget .ncount .count-o {
    display: none;
}
.socialButton .twitter #widget .count-o {
    position: relative;
    background: #fff;
    border: #8799A6 solid 1px;
    border-radius: 4px;
    visibility: hidden;
    min-height: 18px;
    min-width: 15px;
    text-align: center;
}

.socialButton .twitter #widget .count-o u {
    margin-left: -3px;
    border-right-color: #fff;
}

.socialButton .twitter #widget #count {
    white-space: nowrap;
    color: #292F33;
}

.socialButton .twitter #widget .count-o i, .socialButton .twitter #widget .count-o u {
    position: absolute;
    zoom: 1;
    line-height: 0;
    width: 0;
    height: 0;
    left: 0;
    top: 50%;
    margin: -4px 0 0 -4px;
    border: 4px transparent solid;
    border-right-color: #66757f;
    border-left: 0;
}

.facebook ._2tga {
    background: #4267b2;
    border: 1px solid #4267b2;
    color: #fff;
    cursor: pointer;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    -webkit-user-select: none;
    white-space: nowrap;
}

.facebook .inlineBlock {
    display: inline-block;
    zoom: 1;
}

.facebook ._2tga._49ve {
    padding-bottom: 1px;
}

.facebook ._2tga._49ve {
    border-radius: 4px;
    font-size: 11px;
    height: 20px;
    padding: 0 0 0 2px;
}

.facebook ._3jn- {
    height: 16px;
    vertical-align: middle;
    width: 16px;
}

.facebook ._2tga span._49vh, .facebook ._2tga span._5n6h, .facebook ._49vh, ._5n6h {
    font-family: Helvetica, Arial, sans-serif !important;
    vertical-align: middle;
}

.facebook ._2pi7 {
    padding-left: 1px;
    padding-right: 1px;
}

.facebook ._49vh {
    font-weight: bold;
}

.facebook ._2pih {
    padding-right: 4px;
}

.facebook ._5n6h {
    font-weight: normal;
}

.facebook ._2tga:hover {
    background: #365899;
    border: 1px solid #365899;
}

.stButton {
    position: relative;
    z-index: 1;
    text-decoration: none;
    color: #3F3F3F;
    display: inline-block;
    cursor: pointer;
    margin-right: 3px;
    margin-left: 3px;
    font-size: 11px;
    line-height: 16px;
}

.st_email_hcount .stButton .st-email-counter, .st_facebook_hcount .stButton .st-facebook-counter, .st_pinterest_hcount .stButton .st-pinterest-counter, .st_sharethis_hcount .stButton .st-sharethis-counter, .st_twitter_hcount .stButton .st-twitter-counter {
    height: 16px!important;
}

.stButton .st-twitter-counter, .stButton .st-facebook-counter {
    width: 60px;
}

.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {
    background-image: url(../images/facebook_counter.png);
    background-repeat: no-repeat;
    background-size: cover;
    -ms-behavior: url(../images/backgroundsize.min.htc);
    -moz-box-sizing: content-box!important;
    box-sizing: content-box!important;
    display: inline-block;
    white-space: nowrap;
    font-family: Verdana,Helvetica,sans-serif;
    font-size: 11px;
    height: 16px!important;
    min-height: 16px!important;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 16px;
    position: relative;
}

.stButton .stArrow {
    padding-left: 3px;
    margin-left: -1px;
    background: url(../images/bubble_arrow.png) no-repeat 3px 8px;
    line-height: 16px;
    height: 14px;
    display: inline-block;
}

.stButton .stHBubble {
    background: #fff;
    margin-left: 3px;
    margin-right: 3px;
    position: relative;
    z-index: -1;
    display: none;
}

.stButton .stBubble_hcount {
    padding-left: 2px;
    padding-right: 2px;
    white-space: nowrap;
    font-family: Helvetica,sans-serif;
    font-size: 11px;
    height: 16px;
    line-height: 16px;
    font-weight: bold;
    color: #555;
}

.stButton .stButton_gradient {
    background-repeat: repeat-x;
    border: 1px solid #ddd;
    padding: 2px;
    font-family: serif;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
    height: 16px;
    background: #efefef;
}

.stButton .st-yahoo-counter, .stButton .st-linkedin-counter {
    width: 60px;
}

.stButton .st-pinterest-counter, .stButton .st-email-counter {
    width: 60px;
}

.stButton .st-pinterest-counter, .stButton .st-email-counter {
    width: 60px;
}

.footerSocial {
    margin-bottom: 4px;
}

.fontDetailsBottomLeft {
    width: 70%;
    display: inline-block;
    vertical-align: top;
}

.fontDetailsBottomRight {
    padding-top: 8px;
    width: 28%;
    display: inline-block;
    vertical-align: top;
    margin-left: 14px;
}

.fontTagsContents {
    width: 100%;
}

.fontTagsContents .fontTag {
    padding: 6px 10px;
    background-color: #eee;
    margin-right: 8px;
    margin-bottom: 6px;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #777;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.fontTagsContents .fontTag:hover {
    background-color: #ccc;
    text-decoration: none;
    color: #fff;
}

.submitFontForm .tagify {
    border: 1px solid #ababab;
    max-width: 416px;
    width: 100%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.tagify{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;border:1px solid #ddd;padding:0;cursor:text;position:relative;-webkit-transition:.1s;-o-transition:.1s;transition:.1s}@-webkit-keyframes tags--bump{30%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes tags--bump{30%{-webkit-transform:scale(1.2);transform:scale(1.2)}}.tagify:hover{border-color:#ccc}.tagify[readonly]{cursor:default}.tagify[readonly]>.tagify__input{visibility:hidden;width:0;margin:5px 0}.tagify[readonly] x{display:none}.tagify[readonly] tag>div{padding:.3em .5em}.tagify[readonly] tag>div::before{background:-webkit-linear-gradient(45deg,#d6d6d6 25%,transparent 25%,transparent 50%,#d6d6d6 50%,#d6d6d6 75%,transparent 75%,transparent) 0/5px 5px;background:-o-linear-gradient(45deg,#d6d6d6 25%,transparent 25%,transparent 50%,#d6d6d6 50%,#d6d6d6 75%,transparent 75%,transparent) 0/5px 5px;background:linear-gradient(45deg,#d6d6d6 25%,transparent 25%,transparent 50%,#d6d6d6 50%,#d6d6d6 75%,transparent 75%,transparent) 0/5px 5px;-webkit-box-shadow:none;box-shadow:none}.tagify+input,.tagify+textarea{border:0;display:none}.tagify tag{display:inline-block;margin:5px 0 5px 5px;position:relative;z-index:1;cursor:default;-webkit-transition:.13s ease-out;-o-transition:.13s ease-out;transition:.13s ease-out}.tagify tag.tagify--editable>div::before{-webkit-box-shadow:0 0 0 2px #d3e2e2 inset!important;box-shadow:0 0 0 2px #d3e2e2 inset!important}.tagify tag.tagify--editable.tagify--invalid>div::before{-webkit-box-shadow:0 0 0 2px #d39494 inset!important;box-shadow:0 0 0 2px #d39494 inset!important}.tagify tag>div{-webkit-border-radius: 4px;    -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #777;vertical-align:top;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;padding:6px 10px;color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:.13s ease-out;-o-transition:.13s ease-out;transition:.13s ease-out;padding-right:1.5em}.tagify tag>div>*{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:inline-block;vertical-align:top}.tagify tag>div>[contenteditable]{outline:0}.tagify tag>div::before{content:'';position:absolute;border-radius:inherit;left:0;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 0 16px #e5e5e5 inset;box-shadow:0 0 0 16px #e5e5e5 inset;z-index:-1;pointer-events:none;-webkit-transition:120ms ease;-o-transition:120ms ease;transition:120ms ease;-webkit-animation:.3s tags--bump 1 ease-out;animation:.3s tags--bump 1 ease-out}.tagify tag:hover:not([readonly]) div::before{top:-2px;right:-2px;bottom:-2px;left:-2px;-webkit-box-shadow:0 0 0 16px #d3e2e2 inset;box-shadow:0 0 0 16px #d3e2e2 inset}.tagify tag.tagify--noAnim{-webkit-animation:none;animation:none}.tagify tag.tagify--hide{width:0!important;padding-left:0;padding-right:0;margin-left:0;margin-right:0;opacity:0;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:.3s;-o-transition:.3s;transition:.3s;pointer-events:none}.tagify tag.tagify--mark div::before{-webkit-animation:none;animation:none}.tagify tag.tagify--notAllowed div>span{opacity:.5}.tagify tag.tagify--notAllowed div::before{-webkit-box-shadow:0 0 0 20px rgba(211,148,148,.44) inset!important;box-shadow:0 0 0 20px rgba(211,148,148,.44) inset!important;-webkit-transition:.2s;-o-transition:.2s;transition:.2s}.tagify tag[readonly] x{display:none}.tagify tag[readonly]>div{padding:.3em .5em}.tagify tag[readonly]>div::before{background:-webkit-linear-gradient(45deg,#d6d6d6 25%,transparent 25%,transparent 50%,#d6d6d6 50%,#d6d6d6 75%,transparent 75%,transparent) 0/5px 5px;background:-o-linear-gradient(45deg,#d6d6d6 25%,transparent 25%,transparent 50%,#d6d6d6 50%,#d6d6d6 75%,transparent 75%,transparent) 0/5px 5px;background:linear-gradient(45deg,#d6d6d6 25%,transparent 25%,transparent 50%,#d6d6d6 50%,#d6d6d6 75%,transparent 75%,transparent) 0/5px 5px;-webkit-box-shadow:none;box-shadow:none}.tagify tag x{font:14px/16px Serif;width:14px;height:14px;text-align:center;border-radius:50px;position:absolute;z-index:1;right:calc(.5em - 2px);top:50%;cursor:pointer;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.2s ease-out;-o-transition:.2s ease-out;transition:.2s ease-out}.tagify tag x::after{content:"\00D7"}.tagify tag x:hover{color:#fff;background:#c77777}.tagify tag x:hover+div>span{opacity:.5}.tagify tag x:hover+div::before{-webkit-box-shadow:0 0 0 20px rgba(211,148,148,.3) inset!important;box-shadow:0 0 0 20px rgba(211,148,148,.3) inset!important;-webkit-transition:.2s;-o-transition:.2s;transition:.2s}.tagify__input{display:block;min-width:240px;margin:9px 5px;padding:.3em .5em;position:relative}.tagify__input:empty::before{-webkit-transition:.2s ease-out;-o-transition:.2s ease-out;transition:.2s ease-out;opacity:.5;-webkit-transform:none;-ms-transform:none;transform:none}.tagify__input:focus{outline:0}.tagify__input:focus::before{-webkit-transition:.2s ease-out;-o-transition:.2s ease-out;transition:.2s ease-out;opacity:0;-webkit-transform:translatex(6px);-ms-transform:translatex(6px);transform:translatex(6px)}@supports (-moz-appearance:none){.tagify__input:focus::before{display:none}}.tagify__input:focus:empty::before{-webkit-transition:.2s ease-out;-o-transition:.2s ease-out;transition:.2s ease-out;opacity:.3;-webkit-transform:none;-ms-transform:none;transform:none}@supports (-moz-appearance:none){.tagify__input:focus:empty::before{display:inline-block}}.tagify__input::before{content:attr(data-placeholder);line-height:1.8;position:absolute;top:0;z-index:1;color:#000;white-space:nowrap;pointer-events:none;opacity:0}@supports (-moz-appearance:none){.tagify__input::before{line-height:inherit;position:relative}}.tagify__input::after{content:attr(data-suggest);color:#000;opacity:.3;pointer-events:none}.tagify__input tag{margin:0 2.5px}.tagify__input tag>div{padding-top:0;padding-bottom:0}.tagify__input tag>div::before{top:-3px;bottom:-3px}.tagify__input tag:hover:not([readonly])>div::before{top:-3px;bottom:-3px;left:0;right:0}.tagify--mix .tagify__input{padding:5px;margin:0;width:100%;height:100%}.tagify__dropdown{position:absolute;z-index:999;background:#fff;max-height:300px;overflow:auto;-webkit-box-shadow:0 2px 4px -2px rgba(0,0,0,.2);box-shadow:0 2px 4px -2px rgba(0,0,0,.2);-webkit-box-sizing:border-box;box-sizing:border-box}.tagify__dropdown__item{-webkit-box-sizing:inherit;box-sizing:inherit;padding:.35em .6em;margin:2px;cursor:pointer;position:relative}.tagify__dropdown__item--active{background:#e5e5e5}.tagify__dropdown__item:active{background:#f2f2f2}

input[type=text], input[type=password], select, textarea {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid rgb(169, 169, 169);
}

input[type=submit], input[type=reset], button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid rgb(169, 169, 169);
    padding: 4px 12px;
    cursor: pointer;
}

.searchCommercialFontsWrapper form {
    color: #3F3F3F;
    font-weight: bold;
    display: inline-block;
    background-color: #FFF;
    padding: 0px 8px 0px;
    line-height: 24px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid rgb(169, 169, 169);
    margin-top: 2px;
    margin-left: 7px;
}

.searchCommercialFontsWrapper form input[type=text] {
    width: 290px;
    padding: 5px 8px 5px 2px;
    border: none;
    background-color: transparent;
}

.searchCommercialFontsWrapper form input[type=image] {
    position: relative;
    bottom: -3px;
    width: 16px;
    height: 16px;
}

.multi-select-container {
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin: 0px;
}

.multi-select-menu {
  position: absolute;
  left: 0;
  top: 0.8em;
  float: left;
  max-width: 200px !important;
  background: #fff;
  margin: 1em 0;
  padding: 0.4em 0;
  border: 1px solid rgb(169, 169, 169);
  display: none;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}

.multi-select-menu input {
  margin-right: 0.2em;
  margin-left: 0.6em;
  vertical-align: -0.1em;
}

.multi-select-button {
  display: inline-block;
  font-size: 13px;
  padding: 5px;
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #fff;
  border: 1px solid rgb(169, 169, 169);
  border-radius: 4px;
  cursor: default;
  color: #000;
  height: 29px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.multi-select-button:focus {
    outline:none;
}

.multi-select-button:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5em 0.23em 0 0.23em;
  border-color: #151515 transparent transparent transparent;
  margin-left: 0.4em;
  vertical-align: 0.1em;
  float: right;
  margin-right: 1px;
  margin-top: 5px;
}

.multi-select-menuitems {
    width: 200px;
}

.multi-select-menuitems label {
    font-weight: normal;
    text-align: left;
}

.multi-select-container--open .multi-select-menu { display: block; }

.multi-select-container--open .multi-select-button:before {
  border-width: 0 0.23em 0.5em 0.23em;
  border-color: transparent transparent #151515 transparent;
}

.filterLicenseTypeWrapper {
    vertical-align: top;
}

.colourPickerBox {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
    padding: 3px 4px;
}

body > img[width="1"][height="1"] {
	display: block;
}

.characterMap img {
	width: 100%;
}

.pageDetailsLeft .characterMap a {
    word-wrap: break-word;
	overflow-wrap: anywhere;
}

iframe[width="0"][height="0"] {
    display: none;
}

.mainNavBarInner .membersNavLink {
    padding-top: 13px;
    float: right;
    font-weight: bold;
}

.favoritesLinkHeader {
    float: right;
    padding-top: 7px;
    margin-left: 15px;
}

.favoritesLinkHeader a {
    color: #000;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.favoritesLinkHeader a svg {
    vertical-align: middle;
}

.favoritesLinkHeader a span {
    vertical-align: middle;
    margin-left: 4px;
}

.favoritesLinkHeader a:hover svg path {
    fill: #666666;
}

.loginPremiumSidebar .submitFontForm {
    padding-top: 4px;
}

.loginPremiumWrapper {
    display: flex;
    gap: 30px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.loginPremiumWrapper .loginPremiumMain {
    flex: 1;
    min-width: 300px;
}
.loginPremiumWrapper .loginPremiumSidebar {
    flex: 0 0 350px;
    min-width: 300px;
}
.loginPremiumWrapper.loginPremiumWrapperFullWidth .loginPremiumMain {
    flex: 1 1 100%;
    max-width: 100%;
}
.premiumValueProp {
    text-align: center;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 4px;
    margin-bottom: 23px;
    margin-top: 13px;
}
.premiumValueProp h2 {
    margin: 0 0 10px 0;
    font-size: 1.5em;
    color: #000;
}
.loginPremiumWrapper .premiumSection {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 25px;
    margin-bottom: 20px;
}
.loginPremiumWrapper .premiumSection h3 {
    margin: 0 0 15px 0;
    font-size: 1.3em;
    color: #000;
}
.loginPremiumWrapper .premiumBenefits {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.loginPremiumWrapper .premiumBenefits li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}
.loginPremiumWrapper .premiumBenefits li:last-child {
    border-bottom: none;
}
.loginPremiumWrapper .premiumCheckIcon {
    width: 20px;
    height: 20px;
    margin-right: 9px;
    color: #4CAF50;
    flex-shrink: 0;
}
.loginPremiumWrapper .premiumPricing {
    text-align: center;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 4px;
}
.loginPremiumWrapper .premiumPricing .priceValue {
    font-size: 2.5em;
    font-weight: bold;
    color: #000;
    display: block;
    margin-bottom: 5px;
}
.loginPremiumWrapper .premiumPricing .priceLabel {
    font-size: 1em;
    color: #666;
    display: block;
    margin-bottom: 15px;
}
.premiumCta {
    display: inline-block;
    background-color: #000000;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 4px;
    border: 1px solid transparent;
    margin-bottom: 10px;
}
.premiumCta:hover {
    background-color: #333;
    color: #fff;
}
.loginPremiumWrapper .premiumBillingNote {
    font-size: 0.85em;
    color: #666;
    margin-top: 10px;
}
.loginPremiumWrapper .loginSection {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 25px;
}
.loginPremiumWrapper .loginSection h3 {
    margin: 0 0 15px 0;
    font-size: 1.3em;
    color: #000;
}
.loginPremiumWrapper .premiumBenefits li {
    display: flex;
    align-items: center;
}
.loginPremiumWrapper .premiumCheckIcon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    color: #4CAF50;
    flex-shrink: 0;
}
/* Members Dashboard */
.pageMainContent:has(.membersDashboardWrapper) {
    /* background: linear-gradient(to right, #f8f8f8 230px, transparent 230px); */
    margin-bottom: 10px;
}
.membersDashboardWrapper {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
    height: 100%;
    margin-top: 13px;
    margin-bottom: 10px;
}
.membersDashboardNav {
    flex: 0 0 230px;
    min-width: 200px;
}
.membersNav {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.membersNavItem {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}
.membersNavItem:last-child {
    border-bottom: none;
}
.membersNavItem:hover {
    background-color: #f8f8f8;
    color: #000;
}
.membersNavItem.membersNavItemActive {
    background-color: #f0f0f0;
    font-weight: bold;
    border-left: 3px solid #000;
    padding-left: 17px;
}
.membersNavItem.membersNavItemActive:hover {
    background-color: #e8e8e8;
}
.membersNavItem.membersNavItemLogout {
    color: #999;
}
.membersNavItem.membersNavItemLogout:hover {
    background-color: #f8f8f8;
    color: #666;
}
.membersNavIcon {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}
.membersDashboardContent {
    flex: 1;
    min-width: 0;
    width: 100%;
}
.membersDashboardSection h2 {
    margin: 0 0 20px 0;
    font-size: 1.5em;
    color: #000;
}
.membersDashboardInfo p {
    margin: 10px 0;
    color: #333;
}
.subscriptionInfoRow {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}
.subscriptionInfoRow strong {
    min-width: 200px;
    flex-shrink: 0;
}
.subscriptionInfoRow:last-child {
    border-bottom: none;
}
.subscriptionInfoRow strong {
    color: #333;
    font-weight: 600;
}
.subscriptionInfoRow span {
    color: #666;
}
.subscriptionActions {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-top: 20px;
}
.subscriptionStatus {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9em;
}
.subscriptionStatusActive {
    background-color: #d4edda;
    color: #155724;
}
.subscriptionStatusCancelled {
    background-color: #f8d7da;
    color: #721c24;
}
.cancelSubscriptionLink {
    display: inline-block;
    color: #999;
    text-decoration: none;
    font-size: 0.9em;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s;
    cursor: pointer;
    font-family: inherit;
}
.cancelSubscriptionLink:hover {
    color: #666;
    background-color: #f8f8f8;
    border-color: #ccc;
    text-decoration: none;
}
.paymentHistorySection {
    margin-top: 20px;
    padding-top: 20px;
}
.paymentHistorySection h3 {
    margin: 0 0 20px 0;
    font-size: 1.3em;
    color: #000;
}
.paymentHistoryTable {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
.paymentHistoryHeader {
    display: flex;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    color: #333;
}
.paymentHistoryRow {
    display: flex;
    border-bottom: 1px solid #eee;
    background-color: #fff;
}
.paymentHistoryRow:last-child {
    border-bottom: none;
}
.paymentHistoryRow:hover {
    background-color: #f8f8f8;
}
.paymentHistoryCol {
    padding: 12px 15px;
}
.paymentHistoryColDate {
    flex: 0 0 120px;
}
.paymentHistoryColDescription {
    flex: 1;
}
.paymentHistoryColAmount {
    flex: 0 0 100px;
    text-align: center;
}
.paymentHistoryColStatus {
    flex: 0 0 80px;
    text-align: right;
}
.paymentStatus {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
}
.paymentStatusPaid {
    background-color: #d4edda;
    color: #155724;
}
.paymentStatusCancelled {
    background-color: #f8d7da;
    color: #721c24;
}
.paymentStatusFailed {
    background-color: #fff3cd;
    color: #856404;
}
/* Dashboard Statistics Cards */
.dashboardStatsRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 25px 0;
}
.dashboardStatCard {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.2s;
    text-decoration: none;
    color: #333;
}
a.dashboardStatCard {
    cursor: pointer;
}
a.dashboardStatCard:hover {
    background-color: #f8f8f8;
    border-color: #ccc;
    color: #000;
    text-decoration: none;
}
.dashboardStatCardIcon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    border-radius: 4px;
    color: #333;
}
.dashboardStatCardIcon svg,
.dashboardStatCardIcon i {
    width: 18px;
    height: 18px;
}
.dashboardStatCardContent {
    flex: 1;
    min-width: 0;
}
.dashboardStatCardLabel {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 6px;
}
.dashboardStatCardValue {
    font-size: 1.4em;
    font-weight: 600;
    color: #000;
    line-height: 1.2;
}
.dashboardStatCardValueSmall {
    font-size: 1.1em;
}
.dashboardStatCard a {
    color: inherit;
    text-decoration: none;
}
.dashboardStatCard a:hover {
    color: inherit;
    text-decoration: none;
}
.dashboardStatCardDisabled {
    color: #999 !important;
    font-size: 0.9em;
}
.dashboardStatCardAction {
    margin-top: 6px;
}
.dashboardStatCardLinkSmall {
    font-size: 0.8em;
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}
.dashboardStatCardLinkSmall:hover {
    color: #000;
    text-decoration: underline;
}
.membershipStatusBadge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
}
.membershipStatusBadgePremium {
    background-color: #d4edda;
    color: #155724;
}
.membershipStatusBadgeFree {
    background-color: #fff3cd;
    color: #856404;
}
.membershipStatusBadgeAdmin {
    background-color: #e2d9f3;
    color: #5a2d91;
}
/* Dashboard Quick Actions */
.dashboardQuickActions {
    margin: 30px 0;
    padding-top: 25px;
    border-top: 1px solid #eee;
}
.dashboardSectionTitle {
    margin: 0 0 20px 0;
    font-size: 1.3em;
    color: #000;
    font-weight: 600;
}
.dashboardQuickActionsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}
.dashboardQuickAction {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s;
    position: relative;
}
.dashboardQuickAction:hover {
    background-color: #f8f8f8;
    border-color: #ccc;
    color: #000;
    text-decoration: none;
}
.dashboardQuickAction i,
.dashboardQuickAction svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.dashboardQuickActionHighlight {
    background-color: #000;
    color: #fff;
    border-color: #000;
}
.dashboardQuickActionHighlight:hover {
    background-color: #333;
    border-color: #333;
    color: #fff;
}
.dashboardQuickActionBadge {
    margin-left: auto;
    background-color: #f0f0f0;
    color: #333;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
}
.dashboardQuickActionHighlight .dashboardQuickActionBadge {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
/* Dashboard Subscription Summary */
.dashboardSubscriptionSummary {
    margin: 30px 0;
    padding-top: 15px;
}
.dashboardSubscriptionLink {
    display: inline-block;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.dashboardSubscriptionLink:hover {
    color: #000;
    text-decoration: underline;
}
/* Dashboard Recent Activity */
.dashboardRecentActivity {
    margin: 30px 0;
    padding-top: 15px;
}
.dashboardRecentFavorites {
    list-style: disc;
    margin: 0;
}
.dashboardRecentFavorites li {
    padding: 0;
    margin: 0 0 8px 0;
}
.dashboardRecentFavorites li:last-child {
    margin-bottom: 0;
}
.dashboardRecentFavorites a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}
.dashboardRecentFavorites a:hover {
    color: #000;
    text-decoration: underline;
}
.dashboardViewAllLink {
    display: inline-block;
    color: #666;
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.2s;
}
.dashboardViewAllLink:hover {
    color: #000;
    text-decoration: underline;
}
@media (max-width: 768px) {
    .pageMainContent:has(.membersDashboardWrapper) {
        background: none;
    }
    .membersDashboardWrapper {
        flex-direction: column;
    }
    .membersDashboardNav {
        flex: 1 1 100%;
        width: 100%;
    }
    .membersNavItem {
        padding: 8px 15px;
    }
    .membersNavItem.membersNavItemActive {
        padding-left: 12px;
    }
    .membersNavIcon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }
    .loginPremiumWrapper .loginPremiumWrapper {
        flex-direction: column;
    }
    .loginPremiumWrapper .loginPremiumSidebar {
        flex: 1;
    }
    .dashboardStatsRow {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .dashboardQuickActionsGrid {
        grid-template-columns: 1fr;
    }
    .subscriptionInfoRow {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .subscriptionInfoRow strong {
        min-width: auto;
    }
}

/* Favorites Actions */
.favoritesActions {
    margin: 5px 0 15px 0;
    display: block;
    text-align: right
}

.downloadAllButton {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 16px !important;
    background-color: #000000 !important;
    color: #fff !important;
    border: 1px solid #000000 !important;
    border-radius: 4px !important;
    cursor: pointer;
    font-size: 14px !important;
    font-weight: bold;
    line-height: 1.2;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
    vertical-align: middle;
    margin-right: 5px;
}

.downloadAllButton:hover {
    background-color: #333 !important;
    border-color: #333 !important;
}

.downloadAllButton svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.downloadAllButton i svg {
    width: 16px !important;
    height: 16px !important;
    display: block;
}

.clearFavoritesButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color: #fff;
    color: #3F3F3F;
    border: 1px solid #777;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    width: 34px;
    height: 34px;
    vertical-align: middle;
}

.clearFavoritesButton:hover {
    background-color: #f5f5f5 !important;
    border-color: #666 !important;
}

.clearFavoritesButton i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clearFavoritesButton i svg {
    width: 16px !important;
    height: 16px !important;
    display: block;
}